// @ts-nocheck
import { Button } from "@/components/ui/button"
import { useTheme } from "@/context/ThemeProvider"
import { MoonStar, MenuIcon } from "lucide-react"
import { Link } from "react-router"
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
  NavigationMenuViewport,
} from "@/components/ui/navigation-menu"

import { Toggle } from "@/components/ui/toggle"
const Menu = () => {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        {/* Desktop menu - hidden on mobile, visible on md+ */}
        <div className="hidden md:flex md:space-x-1">
          <NavigationMenuItem className="border">
            <NavigationMenuLink
              asChild
              className={navigationMenuTriggerStyle()}
            >
              <Link to="/posts/page/1">Posts</Link>
            </NavigationMenuLink>
          </NavigationMenuItem>
          <NavigationMenuItem className="border">
            <NavigationMenuLink
              asChild
              className={navigationMenuTriggerStyle()}
            >
              <Link to="/about">About</Link>
            </NavigationMenuLink>
          </NavigationMenuItem>
        </div>

        {/* Mobile dropdown - visible only on small screens */}
        <NavigationMenuItem className="md:hidden px-4">
          <NavigationMenuTrigger className="border rounded-none">
            <MenuIcon />
          </NavigationMenuTrigger>

          <NavigationMenuContent>
            <NavigationMenuLink asChild>
              <Link to="/posts/page/1" className="block">
                Posts
              </Link>
            </NavigationMenuLink>
            <NavigationMenuLink asChild>
              <Link to="/about" className="block">
                About
              </Link>
            </NavigationMenuLink>
          </NavigationMenuContent>
        </NavigationMenuItem>
      </NavigationMenuList>
      <NavigationMenuViewport />
    </NavigationMenu>
  )
}

const Header = () => {
  const { theme, setTheme } = useTheme()
  return (
    <header className="w-full h-12 flex items-center justify-center border-b fixed top-0 z-20 bg-sidebar">
      <div className="w-full px-0 md:px-4 flex items-center justify-between">
        <div className="flex items-center md:px-0 px-4">
          <Button
            variant="ghost"
            asChild
            className="border md:border-none rounded-none"
          >
            <Link to="/">
              <span className="text-lg font-semibold">Systems Obscure</span>
            </Link>
          </Button>
        </div>
        <div className="flex itemr justify-between md:gap-4">
          <Toggle
            className="border bg-background rounded-none"
            pressed={theme === "dark"}
            onPressedChange={() =>
              setTheme(theme === "dark" ? "light" : "dark")
            }
          >
            <MoonStar size={10} />
          </Toggle>
          <Menu />

          {/*
          <div className="hidden md:block">
            <Button variant="ghost">
              <GitMerge /> Forgejo
            </Button>

          </div>

					*/}
        </div>
      </div>
    </header>
  )
}

export { Header }
