/** Kopfbereich einer Seite: Titel, Erläuterung, Handlungen. */

import { ChevronLeft } from 'lucide-react';
import type { ReactNode } from 'react';
import { Button } from '@/components/ui';
import { cn } from '@/lib/utils';

export function PageHeader({
  title,
  description,
  actions,
  onBack,
  backLabel = 'Zurück',
  className,
}: {
  readonly title: ReactNode;
  readonly description?: ReactNode | undefined;
  readonly actions?: ReactNode | undefined;
  readonly onBack?: (() => void) | undefined;
  readonly backLabel?: string | undefined;
  readonly className?: string | undefined;
}) {
  return (
    <div className={cn('mb-5', className)}>
      {onBack ? (
        <Button variant="ghost" size="sm" className="-ml-2 mb-2" onClick={onBack}>
          <ChevronLeft />
          {backLabel}
        </Button>
      ) : null}
      <div className="flex flex-wrap items-start justify-between gap-3">
        <div className="min-w-0">
          <h2 className="text-xl font-semibold tracking-tight text-fg">{title}</h2>
          {description ? (
            <p className="mt-1 max-w-3xl text-sm text-fg-muted">{description}</p>
          ) : null}
        </div>
        {actions ? <div className="flex shrink-0 flex-wrap gap-2">{actions}</div> : null}
      </div>
    </div>
  );
}