import React from 'react';
import { 
  Cat, Dog, Bird, Fish, Rabbit, Turtle, 
  Ghost, Skull, Heart, Star, Moon, Sun,
  Flame, Zap, Cloud, Snowflake, Leaf, Flower2,
  Crown, Diamond, Gem, Trophy, Target, Anchor,
  Rocket, Plane, Car, Bike, Train, Ship
} from 'lucide-react';

const ICONS = [
  Cat, Dog, Bird, Fish, Rabbit, Turtle,
  Ghost, Skull, Heart, Star, Moon, Sun,
  Flame, Zap, Cloud, Snowflake, Leaf, Flower2,
  Crown, Diamond, Gem, Trophy, Target, Anchor,
  Rocket, Plane, Car, Bike, Train, Ship
];

const GRADIENT_PAIRS = [
  ['#f472b6', '#c026d3'],
  ['#fb923c', '#ea580c'],
  ['#facc15', '#ca8a04'],
  ['#4ade80', '#16a34a'],
  ['#2dd4bf', '#0d9488'],
  ['#38bdf8', '#0284c7'],
  ['#818cf8', '#6366f1'],
  ['#f87171', '#dc2626'],
  ['#a78bfa', '#7c3aed'],
  ['#fb7185', '#e11d48'],
  ['#34d399', '#059669'],
  ['#60a5fa', '#2563eb'],
];

interface PlayerAvatarProps {
  seed: number;
  size?: number;
  className?: string;
}

export const PlayerAvatar: React.FC<PlayerAvatarProps> = ({ seed, size = 24, className = '' }) => {
  const iconIndex = Math.floor(seed * 1000) % ICONS.length;
  const gradientIndex = Math.floor(seed * 10000) % GRADIENT_PAIRS.length;
  
  const Icon = ICONS[iconIndex];
  const [colorFrom, colorTo] = GRADIENT_PAIRS[gradientIndex];
  const gradientId = `avatar-gradient-${seed.toString().replace('.', '-')}`;
  
  return (
    <div 
      className={`rounded-full flex items-center justify-center ${className}`}
      style={{ 
        background: `linear-gradient(135deg, ${colorFrom}, ${colorTo})`,
        padding: size * 0.3,
      }}
    >
      <Icon size={size} className="text-white" strokeWidth={2.5} />
    </div>
  );
};