import type { ReactNode } from 'react';
import { Database } from 'lucide-react';

/**
 * "Data not yet available" block (CLAUDE.md §281-283, §337). Never a placeholder number.
 * `knows` lists what CancerIndex does know instead, so the block is informative rather than blank.
 */
export function EmptyState({
  title = 'Data not yet available',
  children,
  knows,
  compact = false,
}: {
  title?: string;
  children?: ReactNode;
  knows?: Array<{ label: string; href?: string }>;
  compact?: boolean;
}) {
  return (
    <div role="status" className={`border border-dashed border-rule-strong bg-paper-2 ${compact ? 'px-3 py-2.5' : 'px-4 py-5'}`}>
      <div className="flex items-start gap-2.5">
        <Database aria-hidden className="mt-0.5 h-4 w-4 shrink-0 text-ink-4" />
        <div className="min-w-0">
          <p className={`font-medium text-ink-2 ${compact ? 'text-[13px]' : 'text-sm'}`}>{title}</p>
          {children ? <div className="mt-1 text-[13px] leading-relaxed text-ink-3">{children}</div> : null}
          {knows && knows.length > 0 ? (
            <div className="mt-2 text-[12.5px] text-ink-3">
              <span className="ci-kicker mr-2">What CancerIndex knows</span>
              <ul className="mt-1 flex flex-wrap gap-x-3 gap-y-1">
                {knows.map((k) => (
                  <li key={k.label}>
                    {k.href ? (
                      <a className="ci-link" href={k.href}>
                        {k.label}
                      </a>
                    ) : (
                      k.label
                    )}
                  </li>
                ))}
              </ul>
            </div>
          ) : null}
        </div>
      </div>
    </div>
  );
}