import Link from "next/link";
import {
  BrainCircuit,
  Calculator,
  LayoutDashboard,
  ShieldCheck,
} from "lucide-react";

import { AuthButtons } from "@/components/layout/auth-buttons";

const navItems = [
  { href: "/ai-case", label: "AI Case", icon: BrainCircuit },
  { href: "/calculator", label: "Calculator", icon: Calculator },
  { href: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
];

export function SiteHeader() {
  return (
    <header className="sticky top-0 z-40 border-b border-emerald-100 bg-white/95 backdrop-blur">
      <div className="mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="flex h-16 items-center justify-between">
          <Link href="/" className="inline-flex items-center gap-2">
            <span className="inline-flex size-8 items-center justify-center rounded-lg bg-emerald-700 text-white">
              <ShieldCheck className="size-4" />
            </span>
            <div className="leading-tight">
              <p className="text-sm font-semibold text-emerald-900">AlWirasah</p>
              <p className="hidden text-xs text-emerald-700 sm:block">
                Islamic inheritance made simple
              </p>
            </div>
          </Link>

          <nav className="hidden items-center gap-5 md:flex">
            {navItems.map((item) => (
              <Link
                key={item.href}
                href={item.href}
                className="inline-flex items-center gap-1.5 text-sm text-emerald-900/90 transition-colors hover:text-emerald-700"
              >
                <item.icon className="size-4" />
                {item.label}
              </Link>
            ))}
          </nav>

          <AuthButtons />
        </div>

        <nav className="flex items-center justify-around border-t border-emerald-100 py-2 md:hidden">
          {navItems.map((item) => (
            <Link
              key={item.href}
              href={item.href}
              className="inline-flex items-center gap-1 text-xs font-medium text-emerald-900/90"
            >
              <item.icon className="size-3.5" />
              {item.label}
            </Link>
          ))}
        </nav>
      </div>
    </header>
  );
}