// Thin-stroke minimal SVG icons. All paths use currentColor so you can set
// stroke via the `color` prop. Viewport is 24x24; stroke scales linearly.
// API: <PixelIcon name="cloud" size={16} color="currentColor" />
// (name kept for backwards compat — was pixel art, now thin strokes.)

const ICON_SVG = {
  cloud: (
    <path d="M7 18h10a4 4 0 0 0 .6-7.95 5.5 5.5 0 0 0-10.8 1A3.5 3.5 0 0 0 7 18Z" />
  ),
  rain: (
    <>
      <path d="M7 14h10a3.5 3.5 0 0 0 .5-6.96 5 5 0 0 0-9.82.91A3 3 0 0 0 7 14Z" />
      <path d="M9 18l-.8 2.5M13 18l-.8 2.5M17 18l-.8 2.5" />
    </>
  ),
  sun: (
    <>
      <circle cx="12" cy="12" r="4" />
      <path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M5.6 18.4l1.4-1.4M17 7l1.4-1.4" />
    </>
  ),
  storm: (
    <>
      <path d="M7 14h10a3.5 3.5 0 0 0 .5-6.96 5 5 0 0 0-9.82.91A3 3 0 0 0 7 14Z" />
      <path d="M12 14l-2 4h3l-1.5 4" />
    </>
  ),
  moon: (
    <path d="M20 15.3A8 8 0 1 1 8.7 4a6.5 6.5 0 0 0 11.3 11.3Z" />
  ),
  mail: (
    <>
      <rect x="3" y="5" width="18" height="14" rx="2" />
      <path d="M3.5 6.5l8.5 6.5 8.5-6.5" />
    </>
  ),
  arrow: (
    <>
      <path d="M12 4v16" />
      <path d="M6 10l6-6 6 6" />
    </>
  ),
  heart: (
    <path d="M12 20s-7-4.3-7-10a4 4 0 0 1 7-2.7A4 4 0 0 1 19 10c0 5.7-7 10-7 10Z" />
  ),
  star: (
    <path d="M12 3l2.7 5.5 6 .9-4.4 4.2 1 6-5.3-2.8L6.7 19.6l1-6L3.3 9.4l6-.9L12 3Z" />
  ),
  dot: (
    <circle cx="12" cy="12" r="3" />
  ),
  play: (
    <path d="M7 4v16l13-8Z" />
  ),
  check: (
    <path d="M5 12.5l4 4 10-10" />
  ),
  x: (
    <path d="M6 6l12 12M18 6 6 18" />
  ),
  sparkle: (
    <>
      <path d="M12 3v6M12 15v6M3 12h6M15 12h6" />
      <path d="M6 6l3 3M15 15l3 3M6 18l3-3M15 9l3-3" />
    </>
  ),
  figma: (
    <>
      <path d="M9 3h3v6H9a3 3 0 0 1 0-6Z" />
      <path d="M12 3h3a3 3 0 0 1 0 6h-3V3Z" />
      <path d="M12 9h3a3 3 0 0 1 0 6h-3V9Z" />
      <path d="M9 9h3v6H9a3 3 0 0 1 0-6Z" />
      <path d="M9 15h3v3a3 3 0 0 1-3 0v-3Z" />
    </>
  ),
  linkedin: (
    <>
      <rect x="3" y="3" width="18" height="18" rx="2" />
      <path d="M7 10v7M7 7v.01M11 17v-7M11 13a3 3 0 0 1 6 0v4" />
    </>
  ),
  doc: (
    <>
      <path d="M7 3h7l5 5v11a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z" />
      <path d="M14 3v5h5" />
      <path d="M9 13h6M9 17h4" />
    </>
  ),
  clock: (
    <>
      <circle cx="12" cy="12" r="8" />
      <path d="M12 8v4l3 2" />
    </>
  ),
  location: (
    <>
      <path d="M12 21c-4-4.5-7-8-7-11a7 7 0 0 1 14 0c0 3-3 6.5-7 11Z" />
      <circle cx="12" cy="10" r="2.5" />
    </>
  ),
  wave: (
    <path d="M4 12c2-2 4-2 6 0s4 2 6 0 4-2 6 0" />
  ),
  bolt: (
    <path d="M13 3 5 14h6l-1 7 8-11h-6l1-7Z" />
  ),
};

function PixelIcon({ name, size = 16, color = "currentColor", style = {} }) {
  const path = ICON_SVG[name];
  if (!path) return null;
  // Scale stroke width so it reads as "thin" at all sizes but doesn't vanish.
  const strokeW = Math.max(1.1, Math.min(1.75, 24 / size));
  return (
    <svg
      aria-hidden="true"
      width={size} height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke={color}
      strokeWidth={strokeW}
      strokeLinecap="round"
      strokeLinejoin="round"
      style={{ display: "inline-block", verticalAlign: "middle", ...style }}
    >
      {path}
    </svg>
  );
}

Object.assign(window, { PixelIcon });