import { cn } from '@/lib/cn';

/** Honest empty state: when a source/API is unavailable we say so instead of inventing numbers (CLAUDE.md non-negotiable 4). */
export function Unavailable({ what = 'Data', className, compact = false, reason }: { what?: string; className?: string; compact?: boolean; reason?: string }) {
  return (
    <div className={cn('border border-dashed border-rule-strong text-ink-3', compact ? 'inline-block px-2 py-0.5 text-xs' : 'px-5 py-8 text-center text-sm', className)} role="status">
      {what} unavailable
      {reason && !compact && <span className="mt-1 block text-xs text-ink-3">{reason}</span>}
    </div>
  );
}

/** Inline dash for a missing value inside tables/specs. */
export function Missing({ className }: { className?: string }) {
  return (
    <span className={cn('text-ink-3', className)} aria-label="unavailable">
      —
    </span>
  );
}

export function EmptyState({ title, children, className }: { title: string; children?: React.ReactNode; className?: string }) {
  return (
    <div className={cn('border-y border-rule px-2 py-10 text-center', className)}>
      <p className="text-sm font-medium text-ink">{title}</p>
      {children && <div className="mt-2 text-sm text-ink-3">{children}</div>}
    </div>
  );
}