const paths: Record<string, React.ReactNode> = {
  code: (
    <>
      <path d="M16 14 L6 24 L16 34" />
      <path d="M32 14 L42 24 L32 34" />
      <path d="M27 10 L21 38" />
    </>
  ),
  cloud: (
    <>
      <path d="M14 32 a10 10 0 1 1 2-19.8 A12 12 0 0 1 39 17 a8 8 0 0 1 -1 15" />
      <path d="M24 26 v14" />
      <path d="M18 32 l6 -6 6 6" />
    </>
  ),
  server: (
    <>
      <rect x="8" y="8" width="32" height="12" rx="2" />
      <rect x="8" y="28" width="32" height="12" rx="2" />
      <path d="M14 14 h.5 M14 34 h.5 M20 14 h.5 M20 34 h.5" />
      <path d="M34 14 h2 M34 34 h2" />
    </>
  ),
  shield: (
    <>
      <path d="M24 6 L40 12 V24 c0 10 -7 16 -16 18 C15 40 8 34 8 24 V12 Z" />
      <path d="M17 24 l5 5 9 -10" />
    </>
  ),
  chart: (
    <>
      <circle cx="12" cy="36" r="4" />
      <circle cx="24" cy="18" r="4" />
      <circle cx="38" cy="28" r="4" />
      <path d="M15 33 L21 21 M27 20 L34 26" />
      <path d="M8 8 v32 h32" opacity=".5" />
    </>
  ),
  cart: (
    <>
      <path d="M8 12 h6 l5 22 h18 l4 -14 H17" />
      <circle cx="21" cy="40" r="3" />
      <circle cx="34" cy="40" r="3" />
      <path d="M30 8 l3 3 6 -6" />
    </>
  ),
};

export default function ServiceIcon({ name, className }: { name: string; className?: string }) {
  return (
    <svg
      viewBox="0 0 48 48"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
      aria-hidden="true"
    >
      {paths[name] ?? paths.code}
    </svg>
  );
}