"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { TaijiIcon } from "@/components/svg/taiji";
import { ModeToggle } from "@/components/mode-toggle";
import { SITE_WIDTH_INNER } from "@/components/layout/site-width";

const NAV_ITEMS = [
  { href: "/learn", label: "易经学习" },
  { href: "/liuyao", label: "六爻算卦" },
  { href: "/bazi", label: "生辰八字" },
  { href: "/combined", label: "综合测算" },
];

function NavLink({ href, label }: { href: string; label: string }) {
  const pathname = usePathname();
  const active =
    href === "/"
      ? pathname === "/"
      : pathname === href || pathname.startsWith(`${href}/`);

  return (
    <Link
      href={href}
      className={`whitespace-nowrap text-sm transition-colors ${
        active
          ? "font-medium text-foreground"
          : "text-muted-foreground hover:text-foreground"
      }`}
    >
      {label}
    </Link>
  );
}

export default function Header() {
  return (
    <header className="relative z-10 border-b border-border/40 bg-card/70 py-3 shadow-sm backdrop-blur-md">
      <div
        className={`${SITE_WIDTH_INNER} grid grid-cols-[1fr_auto] items-center gap-y-2 sm:flex sm:justify-between`}
      >
        <Link href="/" className="flex items-center gap-2">
          <TaijiIcon />
          <span className="font-medium tracking-wide">知命阁</span>
        </Link>
        <div className="justify-self-end sm:order-last">
          <ModeToggle />
        </div>
        <nav className="col-span-2 flex flex-wrap items-center justify-center gap-x-4 gap-y-1 sm:order-none sm:col-span-1 sm:flex-1">
          {NAV_ITEMS.map((item) => (
            <NavLink key={item.href} {...item} />
          ))}
        </nav>
      </div>
    </header>
  );
}