/**
 * Compare-button icons; same shapes as includes/Frontend/Icons.php.
 */
const PATHS = {
  arrows: ["M8 3 4 7l4 4", "M4 7h16", "m16 21 4-4-4-4", "M20 17H4"],
  scale: [
    "M12 3v18",
    "M5 7h14",
    "m5 7-3 7a3 3 0 0 0 6 0Z",
    "m19 7-3 7a3 3 0 0 0 6 0Z",
    "M8 21h8",
  ],
  plus: ["M12 5v14", "M5 12h14"],
  columns: [
    "M5 4h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z",
    "M9 4v16",
    "M15 4v16",
  ],
  side_by_side: [
    "M6 3a3 3 0 1 0 0 6 3 3 0 1 0 0-6Z",
    "M18 15a3 3 0 1 0 0 6 3 3 0 1 0 0-6Z",
    "M13 6h3a2 2 0 0 1 2 2v7",
    "M11 18H8a2 2 0 0 1-2-2V9",
  ],
  layers: ["m12 3 9 5-9 5-9-5z", "m3 13 9 5 9-5"],
  checklist: [
    "M11 6h10",
    "M11 12h10",
    "M11 18h10",
    "m3 6 1.5 1.5L7 5",
    "m3 12 1.5 1.5L7 11",
    "m3 18 1.5 1.5L7 17",
  ],
  sliders: [
    "M4 6h10",
    "M18 6h2",
    "M16 4a2 2 0 1 0 0 4 2 2 0 1 0 0-4Z",
    "M4 12h2",
    "M10 12h10",
    "M8 10a2 2 0 1 0 0 4 2 2 0 1 0 0-4Z",
    "M4 18h4",
    "M12 18h8",
    "M10 16a2 2 0 1 0 0 4 2 2 0 1 0 0-4Z",
  ],
  swap: [
    "m17 2 4 4-4 4",
    "M3 11V9a3 3 0 0 1 3-3h15",
    "m7 22-4-4 4-4",
    "M21 13v2a3 3 0 0 1-3 3H3",
  ],
  check: ["M20 6 9 17l-5-5"],
  close: ["M6 6l12 12", "M18 6 6 18"],
  none: ["M12 4a8 8 0 1 0 0 16 8 8 0 1 0 0-16Z", "m6.5 6.5 11 11"],
};

/** Inline SVG icon by name (decorative). */
export function CompareIcon({ name, size = 16, className }) {
  const paths = PATHS[name];

  if (!paths) {
    return null;
  }

  return (
    <svg
      aria-hidden="true"
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
    >
      {paths.map((d) => (
        <path key={d} d={d} />
      ))}
    </svg>
  );
}