// =====================================================================
// LiveSpark LP — SVG アイコンセット
// 絵文字を使わず全てインラインSVGで表現。装飾用途は aria-hidden。
// =====================================================================

const Icon = ({ name, size = 24, className = "", style = {} }) => {
  const props = {
    width: size,
    height: size,
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "currentColor",
    strokeWidth: 1.6,
    strokeLinecap: "round",
    strokeLinejoin: "round",
    "aria-hidden": "true",
    className,
    style,
  };

  switch (name) {
    case "logo":
      // L S をモノグラム化したロゴマーク
      return (
        <svg width={size} height={size} viewBox="0 0 32 32" aria-hidden="true" className={className} style={style}>
          <defs>
            <linearGradient id="lsGrad" x1="0" y1="0" x2="1" y2="1">
              <stop offset="0%" stopColor="#5B8DEF" />
              <stop offset="50%" stopColor="#8B5CF6" />
              <stop offset="100%" stopColor="#22D3EE" />
            </linearGradient>
          </defs>
          <rect x="2" y="2" width="28" height="28" rx="8" fill="url(#lsGrad)" />
          <path d="M9 8 V20 H15" stroke="#fff" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" fill="none" />
          <path d="M22 10 C22 8.5 20.5 8 19 8 C17 8 15.5 9 15.5 10.5 C15.5 13.5 22 12.5 22 16 C22 17.5 20.5 18.5 18.5 18.5 C16.5 18.5 15 17.5 15 16" stroke="#fff" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
        </svg>
      );

    case "users":
      return (
        <svg {...props}>
          <circle cx="9" cy="9" r="3.2" />
          <path d="M3.5 19c0-3 2.6-5 5.5-5s5.5 2 5.5 5" />
          <circle cx="16.5" cy="8" r="2.6" />
          <path d="M15 14.5c3.4 0 5.5 2 5.5 4.5" />
        </svg>
      );

    case "crown":
      return (
        <svg {...props}>
          <path d="M3 8l3.5 3 3-5 2.5 4.5L14.5 6 18 11l3-3-1.5 9H4.5L3 8z" />
          <path d="M5 19h14" />
        </svg>
      );

    case "rocket":
      return (
        <svg {...props}>
          <path d="M14 4c4 0 6 2 6 6 0 4-4 8-7 10l-3-3c2-3 6-7 4-13z" />
          <path d="M10 14l-3-3c-3 0-5 2-5 5h5" />
          <path d="M9 17c0 2-2 4-4 4 0-2 2-4 4-4z" />
          <circle cx="15" cy="9" r="1.4" />
        </svg>
      );

    case "bolt":
      return (
        <svg {...props}>
          <path d="M13 3L5 14h6l-1 7 8-11h-6l1-7z" />
        </svg>
      );

    case "sparkle":
      return (
        <svg {...props}>
          <path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8L12 3z" />
          <path d="M19 16l.8 2.2L22 19l-2.2.8L19 22l-.8-2.2L16 19l2.2-.8L19 16z" />
        </svg>
      );

    case "yen":
      return (
        <svg {...props}>
          <path d="M7 4l5 7 5-7" />
          <path d="M12 11v9" />
          <path d="M7 14h10" />
          <path d="M7 17.5h10" />
        </svg>
      );

    case "piggy":
      return (
        <svg {...props}>
          <path d="M3 13c0-3.5 3-6 7-6h4c3.5 0 7 2 7 5.5 0 2-1 3.5-2.5 4.5L18 19h-2l-.5-1.5h-5L10 19H8l-1-1.5C5 17 3 15 3 13z" />
          <circle cx="8" cy="12.5" r="0.8" fill="currentColor" />
          <path d="M14 7c-.5-1.5 0-3 1.5-3" />
          <path d="M3 13h2" />
        </svg>
      );

    case "body":
      // 人型シルエット + 落ちてくるスター
      return (
        <svg {...props}>
          <circle cx="12" cy="7" r="2.2" />
          <path d="M12 9.5v6" />
          <path d="M8 12l4-2 4 2" />
          <path d="M9 21l3-5.5L15 21" />
          <path d="M6 4l.6 1.6L8 6l-1.4.4L6 8l-.6-1.6L4 6l1.4-.4L6 4z" />
          <path d="M19 5l.4 1L20.5 6.4 19.5 7l-.5 1-.4-1L17.5 6.4 18.6 6 19 5z" />
        </svg>
      );

    case "truck":
      return (
        <svg {...props}>
          <rect x="2" y="8" width="11" height="8" rx="1" />
          <path d="M13 11h4l3 3v2h-7" />
          <circle cx="7" cy="17.5" r="1.6" />
          <circle cx="17" cy="17.5" r="1.6" />
        </svg>
      );

    case "toybox":
      return (
        <svg {...props}>
          <rect x="3" y="11" width="18" height="9" rx="1.5" />
          <path d="M3 14h18" />
          <path d="M12 11V8" />
          <circle cx="12" cy="6" r="2" />
          <path d="M7 8c0-2 2-4 5-4" />
          <path d="M17 8c0-2-2-4-5-4" />
        </svg>
      );

    case "counter":
      return (
        <svg {...props}>
          <rect x="3" y="4" width="18" height="16" rx="2" />
          <path d="M3 9h18" />
          <path d="M7 13h6" />
          <path d="M7 16.5h4" />
          <circle cx="17" cy="14.5" r="1.5" />
        </svg>
      );

    case "calendar":
      return (
        <svg {...props}>
          <rect x="3" y="5" width="18" height="16" rx="2" />
          <path d="M3 10h18" />
          <path d="M8 3v4M16 3v4" />
          <circle cx="9" cy="14" r="1" fill="currentColor" stroke="none" />
          <circle cx="13" cy="14" r="1" fill="currentColor" stroke="none" />
          <circle cx="17" cy="14" r="1" fill="currentColor" stroke="none" />
          <circle cx="9" cy="17.5" r="1" fill="currentColor" stroke="none" />
        </svg>
      );

    case "monitor":
      return (
        <svg {...props}>
          <rect x="3" y="4" width="18" height="12" rx="2" />
          <path d="M8 20h8M12 16v4" />
        </svg>
      );

    case "copy":
      return (
        <svg {...props}>
          <rect x="8" y="8" width="12" height="12" rx="2" />
          <path d="M16 8V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h3" />
        </svg>
      );

    case "paste":
      return (
        <svg {...props}>
          <rect x="5" y="5" width="14" height="16" rx="2" />
          <rect x="9" y="3" width="6" height="4" rx="1" />
          <path d="M9 12h6M9 16h4" />
        </svg>
      );

    case "check":
      return (
        <svg {...props} strokeWidth="2.4">
          <path d="M5 12.5l4 4 10-10" />
        </svg>
      );

    case "dash":
      return (
        <svg {...props}>
          <path d="M6 12h12" />
        </svg>
      );

    case "arrow-right":
      return (
        <svg {...props}>
          <path d="M5 12h14" />
          <path d="M13 6l6 6-6 6" />
        </svg>
      );

    case "chevron-down":
      return (
        <svg {...props}>
          <path d="M6 9l6 6 6-6" />
        </svg>
      );

    case "play":
      return (
        <svg {...props} strokeWidth="0" fill="currentColor">
          <path d="M7 5l12 7-12 7V5z" />
        </svg>
      );

    case "heart":
      return (
        <svg {...props} strokeWidth="0" fill="currentColor">
          <path d="M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.5-7 10-7 10z" />
        </svg>
      );

    case "gift":
      return (
        <svg {...props}>
          <rect x="3" y="9" width="18" height="11" rx="1" />
          <path d="M3 13h18" />
          <path d="M12 9v11" />
          <path d="M7.5 9c-1.5 0-2.5-1-2.5-2.5S6 4 7.5 4 12 6 12 9c0-3 3-5 4.5-5S19 5 19 6.5 18 9 16.5 9" />
        </svg>
      );

    default:
      return null;
  }
};

window.Icon = Icon;