'use client'

import { Breadcrumbs } from '@heroui/react'
import { Button } from '@heroui/react/button'
import { useTranslations } from 'next-intl'
import type { ReactNode } from 'react'

import type { AdminNavigationItem } from '../types/admin-navigation.types'
import {
  headerBodyClass,
  headerMenuButtonClass,
  headerPageBadgeClass,
  headerPageDescriptionClass,
  headerPageMetaRowClass,
  headerPrimaryContentClass,
  headerSecondaryMetaClass,
  headerShellClass,
  headerTextStackClass,
  headerTitleClass,
} from './protected-layout.constants'
import { MenuIcon } from './protected-layout-icons'

export function AdminHeader({
  actions,
  onOpenMenu,
  pageMeta,
}: {
  actions: ReactNode
  onOpenMenu: () => void
  pageMeta: AdminNavigationItem
}) {
  const t = useTranslations('workspace')

  return (
    <header className={headerShellClass} data-testid="admin-mobile-header">
      <div className={headerBodyClass}>
        <div className={headerPrimaryContentClass}>
          <Button
            aria-label={t('menuButton')}
            className={headerMenuButtonClass}
            isIconOnly
            onPress={onOpenMenu}
            size="sm"
            type="button"
            variant="ghost">
            <MenuIcon />
          </Button>
          <div className={headerTextStackClass}>
            <div className={headerPageMetaRowClass}>
              <h1 className={headerTitleClass}>{pageMeta.title}</h1>
              <span className={headerPageBadgeClass}>{pageMeta.eyebrow}</span>
              <span className={headerPageDescriptionClass}>{pageMeta.description}</span>
            </div>
            <div className={headerSecondaryMetaClass} data-testid="admin-mobile-header-secondary">
              <Breadcrumbs
                className="inline-flex max-w-full flex-nowrap items-center overflow-x-auto whitespace-nowrap text-sm text-zinc-500 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden dark:text-zinc-400"
                separator="/">
                <Breadcrumbs.Item className="inline-flex items-center whitespace-nowrap" href="/dashboard">
                  {t('dashboardBreadcrumb')}
                </Breadcrumbs.Item>
                <Breadcrumbs.Item className="inline-flex items-center whitespace-nowrap">
                  {pageMeta.title}
                </Breadcrumbs.Item>
              </Breadcrumbs>
            </div>
          </div>
        </div>

        {actions}
      </div>
    </header>
  )
}
