import React from 'react';

const accent = '#22c55e';
const soft = 'rgba(74, 222, 128, 0.18)';
const stroke = 1.8;

function SvgBox({ children, ...rest }) {
  return (
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden
      {...rest}
    >
      {children}
    </svg>
  );
}

/** 按 SMALL_GAMES 的 id 渲染矢量图标（纯 SVG，无 Emoji） */
export function SmallGameIcon({ gameId }) {
  switch (gameId) {
    case '2048':
      return (
        <SvgBox>
          <rect x="3" y="3" width="7" height="7" rx="1.5" fill={accent} opacity="0.9" />
          <rect x="14" y="3" width="7" height="7" rx="1.5" fill={accent} opacity="0.6" />
          <rect x="3" y="14" width="7" height="7" rx="1.5" fill={accent} opacity="0.75" />
          <rect x="14" y="14" width="7" height="7" rx="1.5" fill={accent} opacity="0.45" />
        </SvgBox>
      );
    case 'white-tile':
      return (
        <SvgBox>
          <rect x="4" y="4" width="16" height="16" rx="2" fill={soft} stroke={accent} strokeWidth={stroke} />
          <rect x="7" y="7" width="10" height="10" rx="1" fill={accent} opacity="0.3" />
          <path d="M12 10v4M10 12h4" stroke={accent} strokeWidth="1.5" strokeLinecap="round" />
        </SvgBox>
      );
    case 'tetris':
      return (
        <SvgBox>
          <rect x="2" y="10" width="6" height="6" rx="1" fill={accent} />
          <rect x="9" y="10" width="6" height="6" rx="1" fill={accent} opacity="0.8" />
          <rect x="16" y="10" width="6" height="6" rx="1" fill={accent} />
          <rect x="9" y="3" width="6" height="6" rx="1" fill={accent} opacity="0.9" />
        </SvgBox>
      );
    case 'snake':
      return (
        <SvgBox>
          <path
            d="M4 16c0-4 3-7 7-7h4c3 0 5-1 7-4"
            stroke={accent}
            strokeWidth="2.5"
            strokeLinecap="round"
            fill="none"
          />
          <circle cx="19" cy="5" r="2.5" fill={accent} />
          <circle cx="6" cy="16" r="2" fill={accent} opacity="0.6" />
        </SvgBox>
      );
    case 'minesweeper':
      return (
        <SvgBox>
          <rect x="3" y="3" width="18" height="18" rx="2" fill={soft} stroke={accent} strokeWidth={stroke} />
          <path d="M3 9h18M3 15h18M9 3v18M15 3v18" stroke={accent} strokeOpacity="0.3" strokeWidth="1" />
          <circle cx="15" cy="15" r="3" fill="#a855f7" />
          <path d="M15 12v6M12 15h6" stroke="#fff" strokeWidth="1.2" strokeLinecap="round" />
        </SvgBox>
      );
    case 'dodge-leaves':
      return (
        <SvgBox>
          <path
            d="M12 3c-5 3-8 8-8 14h16c0-6-3-11-8-14z"
            fill={soft}
            stroke={accent}
            strokeWidth={stroke}
            strokeLinejoin="round"
          />
          <path d="M12 8v9M8 14l4-3 4 3" stroke={accent} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fill="none" />
        </SvgBox>
      );
    case 'plane':
      return (
        <SvgBox>
          <path
            d="M4 14l8-6 8 6-8-2z"
            fill={soft}
            stroke={accent}
            strokeWidth={stroke}
            strokeLinejoin="round"
          />
          <path d="M12 8v10M12 18l-3 3M12 18l3 3" stroke={accent} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
          <circle cx="20" cy="10" r="2" fill="#ef4444" />
        </SvgBox>
      );
    case 'parkour':
      return (
        <SvgBox>
          <circle cx="8" cy="6" r="3" fill={soft} stroke={accent} strokeWidth={stroke} />
          <path d="M8 9v5l-4 4M8 14h6l4 4" stroke={accent} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
          <rect x="16" y="16" width="5" height="4" rx="1" fill={accent} opacity="0.4" />
          <circle cx="19" cy="8" r="3" fill="#fbbf24" />
        </SvgBox>
      );
    case 'floppybird':
      return (
        <SvgBox>
          <ellipse cx="12" cy="12" rx="8" ry="5" fill={soft} stroke={accent} strokeWidth={stroke} transform="rotate(-20 12 12)" />
          <circle cx="9" cy="11" r="2" fill={accent} />
          <path d="M16 10l4-2M16 12l4 2" stroke="#f97316" strokeWidth="1.5" strokeLinecap="round" />
        </SvgBox>
      );
    case 'h5cube':
      return (
        <SvgBox>
          <path d="M4 8l8-4 8 4-8 4z" fill={soft} stroke={accent} strokeWidth={stroke} />
          <path d="M4 8v8l8 4v-8M12 20l8-4V8" stroke={accent} strokeWidth={stroke} fill="none" />
          <path d="M12 4v8" stroke={accent} strokeWidth="1" opacity="0.5" />
        </SvgBox>
      );
    case 'sokoban':
      return (
        <SvgBox>
          <rect x="4" y="4" width="16" height="16" rx="2" fill={soft} stroke={accent} strokeWidth={stroke} />
          <rect x="12" y="5" width="7" height="7" rx="1" fill={accent} opacity="0.5" />
          <rect x="5" y="12" width="7" height="7" rx="1" fill={accent} opacity="0.7" />
          <circle cx="8.5" cy="15.5" r="2.5" fill="#3b82f6" />
        </SvgBox>
      );
    default:
      return (
        <SvgBox>
          <rect x="4" y="4" width="16" height="16" rx="4" fill={soft} stroke={accent} strokeWidth={stroke} />
          <circle cx="12" cy="12" r="4" fill={accent} />
        </SvgBox>
      );
  }
}

export default SmallGameIcon;
