import Link from "next/link";
import { CATEGORIES, site } from "@/config/site";
import { ThemeToggle } from "@/components/layout/theme-toggle";
import { BreakingTicker } from "@/components/home/breaking-ticker";
import { Search } from "lucide-react";

const PRIMARY_NAV = [
  { slug: "", nameAr: "الرئيسية" },
  ...CATEGORIES.filter((c) =>
    ["breaking", "egypt", "arab", "world", "economy", "sports", "technology", "misc", "health", "video"].includes(
      c.slug
    )
  ),
];

export function SiteHeader() {
  return (
    <header className="sticky top-0 z-40 border-b border-ink-100 bg-ink-50/95 backdrop-blur dark:border-ink-800 dark:bg-ink-900/95">
      <div className="mx-auto flex max-w-7xl items-center justify-between gap-6 px-4 py-3">
        <Link href="/" className="shrink-0">
          <span className="font-display text-2xl font-bold text-brand">{site.name}</span>
        </Link>

        <nav className="hidden flex-1 items-center gap-5 overflow-x-auto text-sm font-medium lg:flex">
          {PRIMARY_NAV.map((item) => (
            <Link
              key={item.slug || "home"}
              href={item.slug ? `/category/${item.slug}` : "/"}
              className="whitespace-nowrap text-ink-600 transition-colors hover:text-brand dark:text-ink-200"
            >
              {item.nameAr}
            </Link>
          ))}
        </nav>

        <div className="flex items-center gap-3">
          <Link
            href="/search"
            aria-label="بحث"
            className="rounded-full p-2 text-ink-600 hover:bg-ink-100 dark:text-ink-200 dark:hover:bg-ink-800"
          >
            <Search size={18} />
          </Link>
          <ThemeToggle />
        </div>
      </div>

      <BreakingTicker />
    </header>
  );
}