هدرِ وسط‌چین

"use client"

import * as React from "react"

import { MenuIcon, SearchIcon, ShoppingCartIcon } from "@/components/icons"
import { Button } from "@/components/ui/button"
import { ControlSizeProvider } from "@/components/ui/control-size"
import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet"

const START = ["مجموعه‌ها", "تازه‌ها", "پیشنهادها"]
const END = ["داستانِ ما", "مجله"]

/**
 * هدرِ وسط‌چین برای برندهای لایف‌استایل: نشانِ برند در میانه، لینک‌ها دو طرفش و جست‌وجو
 * و سبد در انتها. در موبایل لینک‌ها در کشوی کناری و برند همچنان وسط می‌ماند.
 */
export default function NavbarCenteredBlock() {
  const [open, setOpen] = React.useState(false)
  const links = [...START, ...END]

  return (
    <ControlSizeProvider size="xl" asChild>
      <header className="border-b border-border bg-background">
        <div className="mx-auto grid h-20 w-full max-w-6xl grid-cols-[1fr_auto_1fr] items-center gap-4 px-4 sm:px-6">
          <nav aria-label="منوی اصلی" className="flex items-center gap-1">
            <Button variant="ghost" size="icon" aria-label="باز کردنِ منو" className="md:hidden" onClick={() => setOpen(true)}>
              <MenuIcon />
            </Button>
            {START.map((link) => (
              <Button key={link} variant="ghost" asChild className="hidden md:inline-flex">
                <a href="#">{link}</a>
              </Button>
            ))}
          </nav>
          <a href="#" className="flex flex-col items-center text-center leading-snug">
            <span className="text-2xl font-black">خانهٔ سفال</span>
            <span className="text-xs text-muted-foreground">از ۱۳۹۸</span>
          </a>
          <div className="flex items-center justify-end gap-1">
            {END.map((link) => (
              <Button key={link} variant="ghost" asChild className="hidden lg:inline-flex">
                <a href="#">{link}</a>
              </Button>
            ))}
            <Button variant="ghost" size="icon" aria-label="جست‌وجو">
              <SearchIcon />
            </Button>
            <Button variant="ghost" size="icon" aria-label="سبدِ خرید">
              <ShoppingCartIcon />
            </Button>
          </div>
        </div>
        <Sheet open={open} onOpenChange={setOpen}>
          <ControlSizeProvider size="xl" asChild>
            <SheetContent side="start" className="flex w-[85%] max-w-xs flex-col gap-6 p-6">
              <SheetHeader className="p-0">
                <SheetTitle>خانهٔ سفال</SheetTitle>
              </SheetHeader>
              <nav aria-label="منوی موبایل" className="flex flex-col gap-1">
                {links.map((link) => (
                  <a key={link} href="#" className="flex h-12 items-center rounded-lg px-3 hover:bg-subtle">
                    {link}
                  </a>
                ))}
              </nav>
            </SheetContent>
          </ControlSizeProvider>
        </Sheet>
      </header>
    </ControlSizeProvider>
  )
}