// Empty state illustrations: inline SVG in the theme's tokens (no external assets, both themes). Decorative.
import type { ReactNode } from 'react';
const Frame = ({ children }: { children: ReactNode }) => (
  <svg className="illo" viewBox="0 0 168 112" aria-hidden="true" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <ellipse cx="84" cy="100" rx="58" ry="6" className="f1" />
    {children}
  </svg>
);

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

export function Illo({ name }: { name: IlloName }) {
  switch (name) {
    case 'apps': return (
      <Frame>
        <rect x="40" y="22" width="40" height="70" rx="9" className="f2" />
        <rect x="64" y="14" width="44" height="78" rx="10" className="fs s1" />
        <rect x="72" y="26" width="28" height="28" rx="7" className="f1" />
        <path d="M80 72h12M80 79h8" className="s2" />
        <circle cx="118" cy="28" r="13" className="fl" />
        <path d="M118 22v12M112 28h12" stroke="#fff" />
      </Frame>
    );
    case 'cloud': return (
      <Frame>
        <path d="M54 66a16 16 0 0 1 3-31.7A22 22 0 0 1 99 30a17 17 0 0 1 14 36z" className="f2" />
        <path d="M60 62a14 14 0 0 1 2.6-27.7A19 19 0 0 1 98.5 32 15 15 0 0 1 110 62" className="s1" />
        <path d="M84 50v32M75 73l9 9 9-9" className="s1" />
        <path d="M60 92h48" className="s2" strokeDasharray="3 5" />
      </Frame>
    );
    case 'reviews': return (
      <Frame>
        <path d="M38 24h70a8 8 0 0 1 8 8v30a8 8 0 0 1-8 8H66l-14 12V70H38a8 8 0 0 1-8-8V32a8 8 0 0 1 8-8z" className="f2" />
        <path d="M60 36h66a8 8 0 0 1 8 8v28a8 8 0 0 1-8 8h-12v12l-14-12H60a8 8 0 0 1-8-8V44a8 8 0 0 1 8-8z" className="fs s1" />
        {[72, 86, 100, 114].map((x, i) => <path key={x} d={`M${x} 52l2.2 4.6 5 .7-3.6 3.5.9 5-4.5-2.4-4.5 2.4.9-5-3.6-3.5 5-.7z`} className={i < 3 ? 'fl' : 'f2'} strokeWidth="0" />)}
      </Frame>
    );
    case 'shield': return (
      <Frame>
        <path d="M84 12 116 24v26c0 22-14 36-32 44-18-8-32-22-32-44V24z" className="f2" />
        <path d="M84 20 110 30v20c0 18-11 30-26 37-15-7-26-19-26-37V30z" className="fs s1" />
        <path d="M71 52l9 9 18-18" className="s1" strokeWidth="3" />
      </Frame>
    );
    case 'key': return (
      <Frame>
        <rect x="34" y="30" width="100" height="58" rx="10" className="f2" />
        <rect x="42" y="22" width="84" height="58" rx="10" className="fs s1" />
        <circle cx="70" cy="51" r="11" className="s1" />
        <path d="M81 51h30M103 51v8M111 51v6" className="s1" />
        <path d="M54 70h20" className="s2" />
      </Frame>
    );
    case 'plane': return (
      <Frame>
        <path d="M30 80c20-6 44-6 64-22" className="s2" strokeDasharray="3 6" />
        <path d="M136 18 58 50l28 10 10 28z" className="f2" />
        <path d="M136 18 58 50l28 10 10 28zM136 18 86 60" className="s1" />
      </Frame>
    );
    case 'pulse': return (
      <Frame>
        <rect x="26" y="20" width="116" height="68" rx="12" className="f2" />
        <rect x="34" y="14" width="100" height="68" rx="11" className="fs s1" />
        <path d="M44 56h16l7-18 12 34 8-22 6 6h21" className="s1" strokeWidth="2.5" />
        <path d="M44 40h80" className="s2" strokeDasharray="4 5" />
      </Frame>
    );
    case 'catalog': return (
      <Frame>
        <rect x="36" y="26" width="44" height="54" rx="9" className="f2" />
        <rect x="88" y="26" width="44" height="54" rx="9" className="f2" />
        <rect x="44" y="18" width="80" height="60" rx="10" className="fs s1" />
        <path d="M56 36h14M56 48h14M56 60h14" className="s2" />
        <path d="M86 34l4 4 7-7M86 46l4 4 7-7M86 58l4 4 7-7" className="s1" />
        <path d="M106 34l8 0M106 46l8 0M106 58l8 0" className="s2" />
      </Frame>
    );
    case 'text': return (
      <Frame>
        <rect x="46" y="18" width="70" height="78" rx="9" className="f2" />
        <rect x="54" y="10" width="70" height="78" rx="9" className="fs s1" />
        <path d="M66 28h46M66 40h40M66 52h46M66 64h28" className="s2" />
        <circle cx="122" cy="76" r="12" className="fl" />
        <path d="M117 76l4 4 7-8" stroke="#fff" />
      </Frame>
    );
    case 'tools': return (
      <Frame>
        <path d="M84 14 118 32v38L84 88 50 70V32z" className="f2" />
        <path d="M84 22 112 37v31L84 83 56 68V37zM56 37l28 15 28-15M84 52v31" className="s1" />
      </Frame>
    );
    default: return (
      <Frame>
        <circle cx="84" cy="52" r="34" className="f2" />
        <circle cx="84" cy="52" r="26" className="s1" strokeDasharray="5 6" />
        <path d="M76 45a8 8 0 1 1 11 7.5c-2 .8-3 2-3 4v2M84 66v.1" className="s1" strokeWidth="3" />
      </Frame>
    );
  }
}