import React from 'react';
import chroma from 'chroma-js';
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
];

export const getAvatarColors = (seed: number): [string, string] => {
  const hue = Math.floor(seed * 360);
  const primaryColor = chroma.hsl(hue, 0.85, 0.55);
  const secondaryColor = chroma.hsl((hue + 35) % 360, 0.8, 0.45);
  
  return [primaryColor.hex(), secondaryColor.hex()];
};

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 Icon = ICONS[iconIndex];
  const [colorFrom, colorTo] = getAvatarColors(seed);
  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>
  );
};