"use client";
import { NavLinks } from "./NavLinks";
import { ThemeToggle } from "./ThemeToggle";
import { Logo } from "./Logo";
import { Menu, X } from "lucide-react";
import { useState } from "react";

export function Header() {
  const [mobileOpen, setMobileOpen] = useState(false);

  return (
    <header className="sticky top-0 z-40 border-b border-[var(--color-border)] bg-[var(--color-surface)]/90 backdrop-blur-md supports-[backdrop-filter]:bg-[var(--color-surface)]/75">
      <div className="container-xl">
        <div className="flex h-16 items-center justify-between">
          <Logo size={26} withText />

          <nav className="hidden md:flex items-center gap-8 text-sm">
            <NavLinks />
            <ThemeToggle />
          </nav>

          <button
            onClick={() => setMobileOpen(!mobileOpen)}
            className="p-2 md:hidden"
            aria-label="Toggle menu"
            type="button"
          >
            {mobileOpen ? (
              <X className="h-5 w-5" />
            ) : (
              <Menu className="h-5 w-5" />
            )}
          </button>
        </div>

        {mobileOpen && (
          <nav className="border-t border-[var(--color-border)] py-6 md:hidden">
            <div className="flex flex-col gap-5 text-base">
              <NavLinks mobile />
              <div className="pt-2 border-t border-[var(--color-border)]">
                <ThemeToggle />
              </div>
            </div>
          </nav>
        )}
      </div>
    </header>
  );
}
