import { StatusBadge, type StatusKey } from "@/components/ui/badge";

/**
 * Kopfzeile einer Detailseite: Kicker (Typ/Vorlage), Titel, optionaler
 * Funkrufname/Untertitel und Status-Badge. Reiner Präsentations-Baustein.
 */
export function DetailHeader({
  kicker,
  titel,
  untertitel,
  status,
}: {
  kicker?: string | null;
  titel: string;
  untertitel?: string | null;
  status?: StatusKey;
}) {
  return (
    <header className="flex flex-wrap items-start justify-between gap-3 border-b border-rand pb-4">
      <div className="min-w-0">
        {kicker ? (
          <p className="text-xs font-medium uppercase tracking-wide text-anthrazit/60">
            {kicker}
          </p>
        ) : null}
        <h1 className="text-2xl font-semibold text-navy">{titel}</h1>
        {untertitel ? (
          <p className="mt-0.5 text-sm text-anthrazit/70">{untertitel}</p>
        ) : null}
      </div>
      {status ? (
        <div className="shrink-0">
          <StatusBadge status={status} />
        </div>
      ) : null}
    </header>
  );
}
