arjmand-pharmacy/components/layout/Header.tsx

"use client";

import { useState } from "react";
import Link from "next/link";
import {
  ChevronDown,
  Heart,
  Menu,
  Search,
  ShoppingBag,
  UserRound,
  X,
} from "lucide-react";
import { Container } from "@/components/Container";
import { Placeholder } from "@/components/Placeholder";
import { MegaMenu } from "@/components/layout/MegaMenu";
import { categories, navLinks, site } from "@/lib/data";

export function Header({ logoSrc }: { logoSrc: string }) {
  const [megaOpen, setMegaOpen] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  const [mobileCats, setMobileCats] = useState(false);

  return (
    <header className="sticky top-0 z-40 border-b border-line bg-white">
      <Container className="flex h-[72px] items-center gap-4">
        <button
          type="button"
          className="grid size-10 place-items-center rounded-xl text-navy lg:hidden"
          onClick={() => setMobileOpen(true)}
          aria-label="منو"
        >
          <Menu className="size-5" />
        </button>

        <Link href="/" className="flex h-11 shrink-0 items-center">
          <Placeholder src={logoSrc} alt={site.name} className="h-11 w-auto object-contain" />
        </Link>

        <form className="relative hidden min-w-0 flex-1 md:block">
          <input
            type="search"
            placeholder="جستجوی دارو، مکمل و محصولات بهداشتی..."
            className="h-11 w-full rounded-xl border border-line bg-mist pr-4 pl-11 text-[13px] outline-none transition focus:border-primary focus:bg-white"
          />
          <Search className="pointer-events-none absolute top-1/2 left-3.5 size-4 -translate-y-1/2 text-muted" />
        </form>

        <div className="ms-auto flex items-center gap-1">
          <Link
            href="#"
            className="hidden items-center gap-2 rounded-xl px-3 py-2 text-[13px] text-ink hover:bg-mist lg:flex"
          >
            <UserRound className="size-5 text-navy" />
            ورود / ثبت‌نام
          </Link>
          <Link href="#" className="grid size-10 place-items-center rounded-xl hover:bg-mist" aria-label="علاقه‌مندی">
            <Heart className="size-5 text-navy" />
          </Link>
          <Link href="#" className="relative grid size-10 place-items-center rounded-xl hover:bg-mist" aria-label="سبد خرید">
            <ShoppingBag className="size-5 text-navy" />
            <span className="absolute top-1.5 left-1.5 grid size-4 place-items-center rounded-full bg-primary text-[10px] text-white">
              ۰
            </span>
          </Link>
        </div>
      </Container>

      <div className="hidden border-t border-line lg:block">
        <Container className="flex h-12 items-center gap-1">
          <div
            className="relative"
            onMouseEnter={() => setMegaOpen(true)}
            onMouseLeave={() => setMegaOpen(false)}
          >
            <button
              type="button"
              className="flex h-9 items-center gap-2 rounded-lg bg-navy px-3.5 text-[13px] font-medium text-white"
            >
              <Menu className="size-4" />
              دسته‌بندی‌ها
              <ChevronDown className={`size-4 transition ${megaOpen ? "rotate-180" : ""}`} />
            </button>
            <MegaMenu open={megaOpen} />
          </div>

          {navLinks.map((link) => (
            <Link
              key={link.href}
              href={link.href}
              className="rounded-lg px-3 py-2 text-[13px] text-ink transition hover:bg-sky hover:text-primary"
            >
              {link.title}
            </Link>
          ))}
        </Container>
      </div>

      {mobileOpen && (
        <div className="fixed inset-0 z-50 lg:hidden">
          <button
            type="button"
            className="absolute inset-0 bg-navy/40"
            aria-label="بستن"
            onClick={() => setMobileOpen(false)}
          />
          <aside className="absolute inset-y-0 right-0 flex w-[86%] max-w-sm flex-col bg-white">
            <div className="flex items-center justify-between border-b border-line px-4 py-3">
              <Placeholder src={logoSrc} alt={site.name} className="h-9 w-auto object-contain" />
              <button type="button" onClick={() => setMobileOpen(false)} aria-label="بستن">
                <X className="size-5" />
              </button>
            </div>
            <form className="px-4 pt-4">
              <input
                type="search"
                placeholder="جستجو..."
                className="h-11 w-full rounded-xl border border-line bg-mist px-3 text-[13px] outline-none"
              />
            </form>
            <nav className="flex-1 overflow-y-auto px-2 py-3">
              <button
                type="button"
                className="flex w-full items-center justify-between rounded-xl px-3 py-2.5 text-right text-[14px] font-medium text-navy"
                onClick={() => setMobileCats((v) => !v)}
              >
                دسته‌بندی‌ها
                <ChevronDown className={`size-4 ${mobileCats ? "rotate-180" : ""}`} />
              </button>
              {mobileCats && (
                <ul className="mb-2 space-y-1 pr-3">
                  {categories.map((cat) => (
                    <li key={cat.id}>
                      <Link href={cat.href} className="block rounded-lg px-3 py-1.5 text-[13px] text-muted">
                        {cat.title}
                      </Link>
                    </li>
                  ))}
                </ul>
              )}
              {navLinks.map((link) => (
                <Link
                  key={link.href}
                  href={link.href}
                  className="block rounded-xl px-3 py-2.5 text-[14px]"
                  onClick={() => setMobileOpen(false)}
                >
                  {link.title}
                </Link>
              ))}
            </nav>
          </aside>
        </div>
      )}
    </header>
  );
}