import Link from 'next/link';

export function EmptyState({ title, children }: { title: string; children?: React.ReactNode }) {
  return (
    <div className="rounded-lg border border-dashed border-slate-3 p-6 text-center">
      <p className="font-semibold">{title}</p>
      {children && <div className="text-sm text-stone-3 mt-1">{children}</div>}
    </div>
  );
}

export function ApiDown() {
  return (
    <EmptyState title="Die Statistik-Schnittstelle antwortet gerade nicht">
      Die Seite lädt die Daten beim nächsten Aufruf neu. Hält der Fehler an, prüfe den Status unter{' '}
      <Link href="/sources" className="text-gold underline">Datenquellen</Link>.
    </EmptyState>
  );
}

export function PageTitle({ title, children }: { title: string; children?: React.ReactNode }) {
  return (
    <div className="mb-8">
      <h1 className="text-3xl sm:text-4xl font-bold tracking-tight">{title}</h1>
      {children && <p className="text-stone-2 mt-2 max-w-2xl">{children}</p>}
    </div>
  );
}