// Empty state art: a Phosphor icon (@phosphor-icons/react, MIT) on a soft tile with an optional small badge icon, in
// the theme's tokens (styles.css .illo), the empty-state style of Linear and Vercel. No drawn artwork. Decorative.
import { ChatTextIcon } from '@phosphor-icons/react/dist/csr/ChatText';
import { CheckIcon } from '@phosphor-icons/react/dist/csr/Check';
import { CloudArrowDownIcon } from '@phosphor-icons/react/dist/csr/CloudArrowDown';
import { CubeIcon } from '@phosphor-icons/react/dist/csr/Cube';
import { DeviceMobileIcon } from '@phosphor-icons/react/dist/csr/DeviceMobile';
import { FileTextIcon } from '@phosphor-icons/react/dist/csr/FileText';
import { KeyIcon } from '@phosphor-icons/react/dist/csr/Key';
import { PackageIcon } from '@phosphor-icons/react/dist/csr/Package';
import { PaperPlaneTiltIcon } from '@phosphor-icons/react/dist/csr/PaperPlaneTilt';
import { PlusIcon } from '@phosphor-icons/react/dist/csr/Plus';
import { PulseIcon } from '@phosphor-icons/react/dist/csr/Pulse';
import { QuestionIcon } from '@phosphor-icons/react/dist/csr/Question';
import { ShieldCheckIcon } from '@phosphor-icons/react/dist/csr/ShieldCheck';
import { StarIcon } from '@phosphor-icons/react/dist/csr/Star';
import { WrenchIcon } from '@phosphor-icons/react/dist/csr/Wrench';
import type { Icon as PhosphorIcon } from '@phosphor-icons/react/lib';

export type IlloName = 'apps' | 'cloud' | 'reviews' | 'shield' | 'key' | 'plane' | 'pulse' | 'catalog' | 'text' | 'tools' | 'unknown';

const ART: Record<IlloName, [PhosphorIcon, PhosphorIcon?]> = {
  apps: [DeviceMobileIcon, PlusIcon],
  cloud: [CloudArrowDownIcon],
  reviews: [ChatTextIcon, StarIcon],
  shield: [ShieldCheckIcon],
  key: [KeyIcon],
  plane: [PaperPlaneTiltIcon],
  pulse: [PulseIcon],
  catalog: [PackageIcon, CheckIcon],
  text: [FileTextIcon, CheckIcon],
  tools: [CubeIcon, WrenchIcon],
  unknown: [QuestionIcon],
};

export function Illo({ name }: { name: IlloName }) {
  const [Main, Badge] = ART[name] ?? ART.unknown;
  return (
    <div className="illo" aria-hidden="true" data-illo={name}>
      <span className="illo-tile">
        <Main weight="regular" />
        {Badge && <span className="illo-badge"><Badge weight="bold" /></span>}
      </span>
    </div>
  );
}