import * as Dialog from "@radix-ui/react-dialog";
import { X } from "lucide-react";
import { navLinks, studio } from "@/data/studio";
import { Mark } from "@/components/mark";

type SiteMenuProps = {
  open: boolean;
  onOpenChange: (open: boolean) => void;
};

export function SiteMenu({ open, onOpenChange }: SiteMenuProps) {
  function handleNav() {
    onOpenChange(false);
  }

  return (
    <Dialog.Root open={open} onOpenChange={onOpenChange}>
      <Dialog.Portal>
        <Dialog.Overlay className="menu-overlay fixed inset-0 z-50 bg-scrim/45" />
        <Dialog.Content
          aria-describedby={undefined}
          className="menu-panel fixed inset-y-0 left-0 z-50 flex h-full w-full max-w-md flex-col bg-canvas text-ink shadow-soft outline-none"
        >
          <div className="flex items-center justify-between px-6 py-5">
            <Dialog.Title className="flex items-center gap-2.5 font-display text-2xl tracking-wide">
              <Mark className="size-7 text-sage" />
              {studio.name}
            </Dialog.Title>
            <Dialog.Close
              className="inline-flex size-11 items-center justify-center rounded-md text-ink transition-colors duration-150 hover:bg-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
              aria-label="Zatvori izbornik"
            >
              <X className="size-5" strokeWidth={1.5} />
            </Dialog.Close>
          </div>

          <nav className="flex flex-1 flex-col justify-center px-6 pb-8">
            <p className="mb-8 text-xs font-medium tracking-[0.22em] text-muted uppercase">
              Izbornik
            </p>
            <ul className="space-y-1">
              {navLinks.map((link, index) => (
                <li key={link.href}>
                  <a
                    href={link.href}
                    onClick={handleNav}
                    className="group flex items-baseline gap-5 py-3"
                  >
                    <span className="w-7 font-sans text-xs tracking-widest text-subtle">
                      {String(index + 1).padStart(2, "0")}
                    </span>
                    <span className="font-display text-4xl leading-none tracking-tight text-ink transition-colors duration-150 group-hover:text-sage sm:text-5xl">
                      {link.label}
                    </span>
                  </a>
                </li>
              ))}
            </ul>
          </nav>

          <div className="border-t border-line px-6 py-6">
            <p className="font-display text-lg text-ink">{studio.address}</p>
            <p className="mt-1 text-sm text-muted">{studio.hours}</p>
            <a
              href={studio.phoneHref}
              className="mt-3 inline-block text-sm text-sage underline-offset-4 hover:underline"
            >
              {studio.phone}
            </a>
          </div>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}