"use client";

import { useState } from "react";
import { LogoutButton } from "./LogoutButton";

export function MobileNav({
  signedIn,
  isAdmin,
  paid,
  name,
}: {
  signedIn: boolean;
  isAdmin: boolean;
  paid: boolean;
  name?: string;
}) {
  const [open, setOpen] = useState(false);
  return (
    <div className="md:hidden">
      <button
        type="button"
        aria-label="Menu"
        onClick={() => setOpen((v) => !v)}
        className="grid h-10 w-10 place-items-center rounded-lg border border-forest/20 text-forest"
      >
        <span className="block h-0.5 w-4 bg-forest" />
        <span className="mt-1 block h-0.5 w-4 bg-forest" />
      </button>
      {open ? (
        <div className="absolute left-0 right-0 top-full border-b border-forest/10 bg-paper px-4 py-4 shadow-lg">
          <div className="flex flex-col gap-3 text-sm text-forest">
            <a href="/#blueprints" onClick={() => setOpen(false)}>
              Blueprints
            </a>
            <a href="/courses" onClick={() => setOpen(false)}>
              Courses
            </a>
            <a href="/blog" onClick={() => setOpen(false)}>
              Blog
            </a>
            <a href="/agent" onClick={() => setOpen(false)}>
              Live coach
            </a>
            {isAdmin ? (
              <a href="/admin" onClick={() => setOpen(false)}>
                Admin
              </a>
            ) : null}
            {signedIn ? (
              <>
                <a href={paid ? "/dashboard" : "/pay"}>Hi, {name?.split(" ")[0]}</a>
                {!paid ? (
                  <a href="/pay" className="font-bold text-terra">
                    Enter the classroom
                  </a>
                ) : null}
                <LogoutButton className="text-left" />
              </>
            ) : (
              <>
                <a href="/login">Sign in</a>
                <a href="/register" className="font-bold text-terra">
                  Join / Register
                </a>
              </>
            )}
          </div>
        </div>
      ) : null}
    </div>
  );
}