// icons.jsx — inline SVG-иконки для CyberX BP (lucide-style, MIT)
// Все иконки: <Trophy size={20} color="#fff" />

const _icon = (paths) => function Icon({ size = 20, color, className, style }) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24"
      fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
      className={className}
      style={{ color, display: 'inline-block', verticalAlign: 'middle', flexShrink: 0, ...style }}>
      {paths}
    </svg>
  );
};

const Trophy = _icon(<>
  <path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/>
  <path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/>
  <path d="M4 22h16"/>
  <path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/>
  <path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/>
  <path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"/>
</>);

const Gift = _icon(<>
  <rect x="3" y="8" width="18" height="4" rx="1"/>
  <path d="M12 8v13"/>
  <path d="M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7"/>
  <path d="M7.5 8a2.5 2.5 0 0 1 0-5C11 3 12 5 12 8c0-3 1-5 4.5-5a2.5 2.5 0 0 1 0 5"/>
</>);

const Lock = _icon(<>
  <rect width="18" height="11" x="3" y="11" rx="2" ry="2"/>
  <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
</>);

const Check = _icon(<path d="M20 6 9 17l-5-5"/>);

const CheckCircle = _icon(<>
  <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
  <path d="m9 11 3 3L22 4"/>
</>);

const Diamond = _icon(<path d="M2.7 10.3a2.41 2.41 0 0 0 0 3.41l7.59 7.59a2.41 2.41 0 0 0 3.41 0l7.59-7.59a2.41 2.41 0 0 0 0-3.41L13.7 2.71a2.41 2.41 0 0 0-3.41 0Z"/>);

const Zap = _icon(<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>);

const Target = _icon(<>
  <circle cx="12" cy="12" r="10"/>
  <circle cx="12" cy="12" r="6"/>
  <circle cx="12" cy="12" r="2"/>
</>);

// Medal — заливается через `color` (currentColor)
const Medal = _icon(<>
  <path d="M7.21 15 2.66 7.14a2 2 0 0 1 .13-2.2L4.4 2.8A2 2 0 0 1 6 2h12a2 2 0 0 1 1.6.8l1.6 2.14a2 2 0 0 1 .14 2.2L16.79 15"/>
  <path d="M11 12 5.12 2.2"/>
  <path d="m13 12 5.88-9.8"/>
  <path d="M8 7h8"/>
  <circle cx="12" cy="17" r="5"/>
</>);

const Crown = _icon(<>
  <path d="m2 4 3 12h14l3-12-6 7-4-7-4 7-6-7zm3 16h14"/>
</>);

const Gamepad2 = _icon(<>
  <line x1="6" x2="10" y1="11" y2="11"/>
  <line x1="8" x2="8" y1="9" y2="13"/>
  <line x1="15" x2="15.01" y1="12" y2="12"/>
  <line x1="18" x2="18.01" y1="10" y2="10"/>
  <path d="M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z"/>
</>);

const Coins = _icon(<>
  <circle cx="8" cy="8" r="6"/>
  <path d="M18.09 10.37A6 6 0 1 1 10.34 18"/>
  <path d="M7 6h1v4"/>
  <path d="m16.71 13.88.7.71-2.82 2.82"/>
</>);

const Wind = _icon(<>
  <path d="M17.7 7.7a2.5 2.5 0 1 1 1.8 4.3H2"/>
  <path d="M9.6 4.6A2 2 0 1 1 11 8H2"/>
  <path d="M12.6 19.4A2 2 0 1 0 14 16H2"/>
</>);

const Swords = _icon(<>
  <polyline points="14.5 17.5 3 6 3 3 6 3 17.5 14.5"/>
  <line x1="13" x2="19" y1="19" y2="13"/>
  <line x1="16" x2="20" y1="16" y2="20"/>
  <line x1="19" x2="21" y1="21" y2="19"/>
  <polyline points="14.5 6.5 18 3 21 3 21 6 17.5 9.5"/>
  <line x1="5" x2="9" y1="14" y2="18"/>
  <line x1="7" x2="4" y1="17" y2="20"/>
  <line x1="3" x2="5" y1="19" y2="21"/>
</>);

const Sunrise = _icon(<>
  <path d="M12 2v8"/>
  <path d="m4.93 10.93 1.41 1.41"/>
  <path d="M2 18h2"/>
  <path d="M20 18h2"/>
  <path d="m19.07 10.93-1.41 1.41"/>
  <path d="M22 22H2"/>
  <path d="m8 6 4-4 4 4"/>
  <path d="M16 18a4 4 0 0 0-8 0"/>
</>);

const ClipboardList = _icon(<>
  <rect width="8" height="4" x="8" y="2" rx="1" ry="1"/>
  <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/>
  <path d="M12 11h4"/>
  <path d="M12 16h4"/>
  <path d="M8 11h.01"/>
  <path d="M8 16h.01"/>
</>);

const Cake = _icon(<>
  <path d="M20 21v-8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8"/>
  <path d="M4 16s.5-1 2-1 2.5 2 4 2 2.5-2 4-2 2.5 2 4 2 2-1 2-1"/>
  <path d="M2 21h20"/>
  <path d="M7 8v3"/>
  <path d="M12 8v3"/>
  <path d="M17 8v3"/>
</>);

const Phone = _icon(<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>);

const MapPin = _icon(<>
  <path d="M20 10c0 7-8 13-8 13s-8-6-8-13a8 8 0 0 1 16 0z"/>
  <circle cx="12" cy="10" r="3"/>
</>);

const Bell = _icon(<>
  <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/>
  <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/>
</>);

const Settings = _icon(<>
  <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/>
  <circle cx="12" cy="12" r="3"/>
</>);

const Bot = _icon(<>
  <path d="M12 8V4H8"/>
  <rect width="16" height="12" x="4" y="8" rx="2"/>
  <path d="M2 14h2"/>
  <path d="M20 14h2"/>
  <path d="M15 13v2"/>
  <path d="M9 13v2"/>
</>);

const KeyRound = _icon(<>
  <path d="M2 18v3c0 .6.4 1 1 1h4v-3h3v-3h2l1.4-1.4a6.5 6.5 0 1 0-4-4Z"/>
  <circle cx="16.5" cy="7.5" r=".5"/>
</>);

const LogOut = _icon(<>
  <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
  <polyline points="16 17 21 12 16 7"/>
  <line x1="21" x2="9" y1="12" y2="12"/>
</>);

const Monitor = _icon(<>
  <rect width="20" height="14" x="2" y="3" rx="2"/>
  <line x1="8" x2="16" y1="21" y2="21"/>
  <line x1="12" x2="12" y1="17" y2="21"/>
</>);

const ChevronLeft = _icon(<path d="m15 18-6-6 6-6"/>);
const ChevronRight = _icon(<path d="m9 18 6-6-6-6"/>);
const X = _icon(<><path d="M18 6 6 18"/><path d="m6 6 12 12"/></>);

const Mail = _icon(<>
  <rect width="20" height="16" x="2" y="4" rx="2"/>
  <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/>
</>);

const Palette = _icon(<>
  <circle cx="13.5" cy="6.5" r=".5" fill="currentColor"/>
  <circle cx="17.5" cy="10.5" r=".5" fill="currentColor"/>
  <circle cx="8.5" cy="7.5" r=".5" fill="currentColor"/>
  <circle cx="6.5" cy="12.5" r=".5" fill="currentColor"/>
  <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"/>
</>);

const Smile = _icon(<>
  <circle cx="12" cy="12" r="10"/>
  <path d="M8 14s1.5 2 4 2 4-2 4-2"/>
  <line x1="9" x2="9.01" y1="9" y2="9"/>
  <line x1="15" x2="15.01" y1="9" y2="9"/>
</>);

// Карта строка → компонент (для achievement.icon из БД)
const ICONS_BY_KEY = {
  trophy: Trophy, gift: Gift, lock: Lock, check: Check, check_circle: CheckCircle,
  diamond: Diamond, zap: Zap, target: Target, medal: Medal, crown: Crown,
  gamepad: Gamepad2, gamepad2: Gamepad2, coins: Coins, wind: Wind, swords: Swords,
  sunrise: Sunrise, clipboard: ClipboardList, clipboard_list: ClipboardList,
  cake: Cake, phone: Phone, map_pin: MapPin, bell: Bell, settings: Settings,
  bot: Bot, key: KeyRound, key_round: KeyRound, logout: LogOut,
  monitor: Monitor, mail: Mail, palette: Palette, smile: Smile,
};

function AchIcon({ iconKey, size = 80, color }) {
  const Cmp = ICONS_BY_KEY[iconKey] || Trophy;
  return <Cmp size={size} color={color || '#fff'}/>;
}
