هدرِ پنل

"use client"

import { BellIcon, ChevronDownIcon, LogoutIcon, MenuIcon, SettingsIcon, UserIcon } from "@/components/icons"
import { Avatar } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { ControlSizeProvider } from "@/components/ui/control-size"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { SearchField } from "@/components/ui/search-field"
import { stockImages } from "@/lib/stock-images"

/**
 * هدرِ پنلِ مدیریت: منوی کناری در موبایل، جست‌وجوی سراسری با میان‌برِ کیبورد، اعلان با
 * نقطهٔ تازه، و منوی حساب با عکس، نام و نقش (پروفایل، تنظیمات، خروج).
 */
export default function NavbarDashboardBlock() {
  return (
    <ControlSizeProvider size="xl" asChild>
      <header className="sticky top-0 z-30 border-b border-border bg-background">
        <div className="flex h-16 items-center gap-4 px-4 sm:px-6">
          <Button variant="ghost" size="icon" aria-label="باز کردنِ منوی کناری" className="lg:hidden">
            <MenuIcon />
          </Button>
          <SearchField aria-label="جست‌وجو در پنل" placeholder="جست‌وجوی سفارش، مشتری یا کالا" className="max-w-md flex-1" />
          <div className="ms-auto flex items-center gap-2">
            <Button variant="ghost" size="icon" aria-label="اعلان‌ها، ۳ تازه" className="relative">
              <BellIcon />
              <span aria-hidden className="absolute end-2.5 top-2.5 size-2 rounded-full bg-destructive" />
            </Button>
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" className="gap-3 px-2">
                  <Avatar size="sm" alt="" src={stockImages.personWoman1.src} />
                  <span className="hidden flex-col items-start leading-snug sm:flex">
                    <span className="text-sm font-semibold">مهسا کریمی</span>
                    <span className="text-xs text-muted-foreground">مدیرِ فروشگاه</span>
                  </span>
                  <ChevronDownIcon className="text-muted-foreground" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end" className="w-56">
                <DropdownMenuLabel>حسابِ من</DropdownMenuLabel>
                <DropdownMenuItem>
                  <UserIcon />
                  پروفایل
                </DropdownMenuItem>
                <DropdownMenuItem>
                  <SettingsIcon />
                  تنظیمات
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem variant="destructive">
                  <LogoutIcon />
                  خروج
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </div>
      </header>
    </ControlSizeProvider>
  )
}