هدرِ فروشگاه

"use client"

import * as React from "react"

import { MenuIcon, ShoppingCartIcon, UserIcon, XIcon } from "@/components/icons"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { ControlSizeProvider } from "@/components/ui/control-size"
import { SearchField } from "@/components/ui/search-field"
import { toFaDigits } from "@/lib/persian"

const CATEGORIES = ["گلدان و سفال", "نوشت‌افزار", "میزِ کار", "دکورِ خانه", "تخفیف‌ها"]

/**
 * هدرِ فروشگاه: نوارِ اعلانِ بالا (بستنی)، ردیفِ برند و جست‌وجوی پهن با حساب و سبد،
 * و ردیفِ دسته‌ها زیرش؛ در موبایل جست‌وجو به ردیفِ خودش می‌رود و دسته‌ها افقی اسکرول می‌شوند.
 */
export default function NavbarAnnouncementBlock() {
  const [notice, setNotice] = React.useState(true)

  return (
    <ControlSizeProvider size="xl" asChild>
      <header className="border-b border-border bg-background">
        {notice && (
          <div className="relative flex items-center justify-center gap-3 bg-inverse px-10 py-2.5 text-center text-sm text-[var(--dig-white)]">
            <span>ارسالِ رایگان برای خریدِ بالای ۳ میلیون تومان</span>
            <Button variant="ghost" size="icon" aria-label="بستنِ اعلان" onClick={() => setNotice(false)} className="absolute end-2 text-[var(--dig-white)] hover:bg-inverse-raised">
              <XIcon />
            </Button>
          </div>
        )}
        <div className="mx-auto flex w-full max-w-6xl flex-wrap items-center gap-4 px-4 py-4 sm:px-6">
          <Button variant="ghost" size="icon" aria-label="باز کردنِ منو" className="md:hidden">
            <MenuIcon />
          </Button>
          <a href="#" className="flex items-center gap-2 text-lg font-black">
            <span aria-hidden className="size-3 rounded-sm bg-[var(--dig-orange-500)]" />
            خانهٔ سفال
          </a>
          <SearchField aria-label="جست‌وجو در فروشگاه" placeholder="جست‌وجوی کالا، دسته یا برند" className="order-last w-full md:order-none md:mx-6 md:w-auto md:flex-1" />
          <div className="ms-auto flex items-center gap-1 md:ms-0">
            <Button variant="ghost" className="hidden sm:inline-flex">
              <UserIcon />
              ورود
            </Button>
            <Button variant="outline" aria-label={`سبد خرید، ${toFaDigits(3)} کالا`}>
              <ShoppingCartIcon />
              <Badge color="primary">{toFaDigits(3)}</Badge>
            </Button>
          </div>
        </div>
        <nav aria-label="دسته‌ها" className="mx-auto w-full max-w-6xl overflow-x-auto px-4 sm:px-6">
          <ul className="flex gap-6 pb-3 text-sm whitespace-nowrap">
            {CATEGORIES.map((category, index) => (
              <li key={category}>
                <a href="#" className={index === CATEGORIES.length - 1 ? "font-semibold text-destructive" : "text-muted-foreground hover:text-foreground"}>
                  {category}
                </a>
              </li>
            ))}
          </ul>
        </nav>
      </header>
    </ControlSizeProvider>
  )
}