points-of-interest/client/src/components/layout/AppHeader.tsx

import { Flame, Focus, LocateFixed, MapPin, RefreshCw } from 'lucide-react'
import { useTranslation } from 'react-i18next'

import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { LanguageToggle } from '@/components/layout/LanguageToggle'
import { ThemeToggle } from '@/components/layout/ThemeToggle'
import type { FeedStatus } from '@/types/api'

interface AppHeaderProps {
  status: FeedStatus
  statusLabel: string
  lastUpdatedLabel: string
  onRefresh: () => void
  onFocusHeat: () => void
  onLocateUser: () => void
  onFocusMySignal: () => void
  disableRefresh: boolean
  disableHeat: boolean
  disableLocate: boolean
  disableMySignal: boolean
}

export function AppHeader({
  status,
  statusLabel,
  lastUpdatedLabel,
  onRefresh,
  onFocusHeat,
  onLocateUser,
  onFocusMySignal,
  disableRefresh,
  disableHeat,
  disableLocate,
  disableMySignal,
}: AppHeaderProps) {
  const { t } = useTranslation()
  const isError = status === 'error'

  return (
    <header className="sticky top-0 z-40 border-b border-border/60 bg-background/80 backdrop-blur">
      <div className="mx-auto flex w-full max-w-6xl flex-wrap items-center justify-between gap-3 px-4 py-3 sm:px-6">
        <div className="flex items-center gap-3">
          <span className="flex h-10 w-10 items-center justify-center rounded-full border border-border/60 bg-primary/10 text-primary">
            <Flame className="h-5 w-5" />
          </span>
          <div className="flex flex-col">
            <span className="text-lg font-semibold sm:text-xl">{t('app.name')}</span>
            <span className="text-xs text-muted-foreground sm:text-sm">{t('app.tagline')}</span>
          </div>
        </div>
        <div className="flex flex-1 flex-wrap items-center justify-end gap-2">
          <Badge
            variant="secondary"
            className={
              'inline-flex items-center gap-2 rounded-full border border-border/60 bg-muted/60 px-3 py-1 text-xs font-medium uppercase tracking-wide'
            }
          >
            <span
              className={`flex items-center gap-2 ${isError ? 'text-destructive' : 'text-primary'}`}
              aria-live="polite"
            >
              <span className="relative block h-2.5 w-2.5 rounded-full bg-current">
                <span className="absolute inset-[-0.35rem] rounded-full border border-current opacity-40 animate-status-pulse" />
              </span>
              {statusLabel}
            </span>
            <span className="text-[10px] uppercase text-muted-foreground">
              {t('header.badge.updated', { time: lastUpdatedLabel })}
            </span>
          </Badge>
          <Button
            variant="ghost"
            size="icon"
            onClick={onRefresh}
            disabled={disableRefresh}
            aria-label={t('header.actions.refresh')}
          >
            <RefreshCw className="h-4 w-4" />
          </Button>
          <Button
            variant="secondary"
            size="icon"
            onClick={onFocusHeat}
            disabled={disableHeat}
            aria-label={t('header.actions.focusHeat')}
          >
            <Focus className="h-4 w-4" />
          </Button>
          <Button
            variant="ghost"
            size="icon"
            onClick={onLocateUser}
            disabled={disableLocate}
            aria-label={t('header.actions.locate')}
          >
            <LocateFixed className="h-4 w-4" />
          </Button>
          <Button
            variant="ghost"
            size="icon"
            onClick={onFocusMySignal}
            disabled={disableMySignal}
            aria-label={t('header.actions.mySignal')}
          >
            <MapPin className="h-4 w-4" />
          </Button>
          <LanguageToggle />
          <ThemeToggle />
        </div>
      </div>
    </header>
  )
}