"use client"

import { NavigationMenu, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, navigationMenuTriggerStyle } from "@/components/ui/navigation-menu";
import { Menu } from "lucide-react";
import Link from "next/link";
import { useState } from "react";
import { Button } from "../ui/button";
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "../ui/sheet";

const links = [
  { href: "/", label: "Home" },
  { href: "/artworks", label: "Portfolio" },
  { href: "/artworks/animalstudies", label: "Animal Studies" },
  { href: "/commissions", label: "Commissions" },
  { href: "/tos", label: "Terms of Service" },
  // { href: "/portfolio/artfight", label: "Artfight" },
  // { href: "/portfolio/minis", label: "Miniatures" },
  // { href: "/commissions", label: "Commissions" },
  // { href: "/ych", label: "YCH / Custom offers" },
  // { href: "/todo", label: "todo (temp)" },
]

export default function TopNav() {
  const [open, setOpen] = useState(false)

  return (
    <div className="w-full flex items-center justify-between">
      {/* Desktop Nav */}
      <div className="hidden md:flex">
        <NavigationMenu>
          <NavigationMenuList>
            {links.map(({ href, label }) => (
              <NavigationMenuItem key={href}>
                <NavigationMenuLink
                  asChild
                  className={navigationMenuTriggerStyle()}
                >
                  <Link href={href}>{label}</Link>
                </NavigationMenuLink>
              </NavigationMenuItem>
            ))}
          </NavigationMenuList>
        </NavigationMenu>
      </div>

      {/* Mobile Nav */}
      <div className="md:hidden">
        <Sheet open={open} onOpenChange={setOpen}>
          <SheetTrigger asChild>
            <Button variant="outline" size="icon">
              <Menu className="w-6 h-6" />
            </Button>
          </SheetTrigger>
          <SheetContent side="left">
            <SheetHeader>
              <SheetTitle className="text-lg">Navigation</SheetTitle>
            </SheetHeader>
            <nav className="mt-4 flex flex-col gap-2">
              {links.map(({ href, label }) => (
                <Link
                  key={href}
                  href={href}
                  onClick={() => setOpen(false)}
                  className="block px-4 py-2 rounded-md hover:bg-muted text-sm font-medium transition-colors"
                >
                  {label}
                </Link>
              ))}
            </nav>
          </SheetContent>
        </Sheet>
      </div>
    </div>
  );
}