src/components/clean/layout/CleanHeader.tsx

"use client";

import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { Menu, UserRound } from "lucide-react";
import { cn } from "@/lib/utils";

const desktopNavigation = [
  { label: "Today", href: "/tuition" },
  { label: "Learn Anything", href: "/learn-anything" },
  { label: "Study Chat", href: "/study-chat" },
  { label: "Progress", href: "/progress" },
] as const;

export interface CleanHeaderProps {
  onMenuClick?: () => void;
  className?: string;
}

export function CleanHeader({ onMenuClick, className }: CleanHeaderProps) {
  const pathname = usePathname() ?? "";

  return (
    <header className={cn("flex h-16 shrink-0 items-center border-b border-[#E7E4DE] bg-[#FBFAF7] px-3 sm:px-5", className)}>
      <div className="flex min-w-0 items-center gap-2">
        <button
          type="button"
          onClick={onMenuClick}
          className="inline-flex size-9 items-center justify-center rounded-lg text-[#6F6B64] transition hover:bg-[#F0EEE8] hover:text-[#171717] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#171717]/20 lg:hidden"
          aria-label="Open navigation"
        >
          <Menu className="size-[20px]" strokeWidth={1.8} />
        </button>
        <Link href="/tuition" className="flex items-center gap-2.5 rounded-lg px-1.5 py-1">
          <span className="flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-[#171717]">
            <Image src="/docdoe-logo-mark.png" alt="DocDoe" width={20} height={20} className="object-contain" priority />
          </span>
          <span className="text-[15px] font-bold text-[#171717]">DocDoe</span>
        </Link>
      </div>

      <nav className="mx-auto hidden items-center gap-1 lg:flex" aria-label="Primary navigation">
        {desktopNavigation.map((item) => {
          const active = pathname === item.href || pathname.startsWith(`${item.href}/`);
          return (
            <Link
              key={item.href}
              href={item.href}
              aria-current={active ? "page" : undefined}
              className={cn(
                "rounded-lg px-3 py-2 text-[12px] font-semibold transition",
                active ? "bg-[#171717] text-white" : "text-[#6F6B64] hover:bg-[#F0EEE8] hover:text-[#171717]",
              )}
            >
              {item.label}
            </Link>
          );
        })}
      </nav>

      <Link
        href="/profile"
        aria-label="Profile"
        className="ml-auto inline-flex size-9 items-center justify-center rounded-lg text-[#6F6B64] transition hover:bg-[#F0EEE8] hover:text-[#171717] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#171717]/20 lg:ml-0"
      >
        <UserRound className="size-[18px]" strokeWidth={1.8} />
      </Link>
    </header>
  );
}