import { CircleSlash2 } from 'lucide-react';
import type { ReactNode } from 'react';
import { t } from '@/i18n';
import { cn } from '@/lib/cn';

/** Explicit "No data" state — never a blank space. Optional list of the sources that were checked. */
export function EmptyState({ title, hint, sourcesChecked, action, className, compact }: { title?: ReactNode; hint?: ReactNode; sourcesChecked?: string[]; action?: ReactNode; className?: string; compact?: boolean }) {
  return (
    <div className={cn('flex items-start gap-3 border-t border-dashed border-rule-strong text-sm text-ink-2', compact ? 'py-3' : 'py-6', className)}>
      <CircleSlash2 size={18} aria-hidden className="mt-0.5 shrink-0 text-ink-3" />
      <div className="min-w-0">
        <p className="font-medium text-ink">{title ?? t('empty.generic')}</p>
        {hint ? <p className="mt-0.5 text-ink-2">{hint}</p> : null}
        {sourcesChecked && sourcesChecked.length ? <p className="mt-0.5 text-xs text-ink-3">{t('empty.sourcesChecked', { sources: sourcesChecked.join(', ') })}</p> : null}
        {action ? <div className="mt-2">{action}</div> : null}
      </div>
    </div>
  );
}

/** Calm full-width state for a 503 (snapshot not built yet) or unreachable API. */
export function NotBuiltState({ className }: { className?: string }) {
  return (
    <div className={cn('mx-auto max-w-prose py-16 text-center', className)}>
      <div className="eyebrow">{t('site.name')}</div>
      <h2 className="display mt-2 text-2xl text-ink">{t('common.notBuilt')}</h2>
      <p className="mt-2 text-ink-2">{t('common.notBuiltHint')}</p>
    </div>
  );
}