components/PokemonCard.js

import React from 'react';

const PokemonCard = ({ pokemon }) => {
  const getTypeColor = (type) => {
    const colors = {
      fire: 'bg-red-500',
      water: 'bg-blue-500',
      grass: 'bg-green-500',
      electric: 'bg-yellow-400',
      psychic: 'bg-purple-500',
      ice: 'bg-cyan-300',
      dragon: 'bg-indigo-500',
      dark: 'bg-gray-800',
      fairy: 'bg-pink-300',
      normal: 'bg-gray-300',
      fighting: 'bg-orange-700',
      flying: 'bg-sky-300',
      poison: 'bg-purple-600',
      ground: 'bg-amber-700',
      rock: 'bg-stone-500',
      bug: 'bg-lime-600',
      ghost: 'bg-indigo-900',
    };
    return colors[type] || 'bg-gray-500';
  };

  return (
    <div className="bg-white rounded-xl shadow-lg overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl border-2 border-gray-100">
      <div className={`${getTypeColor(pokemon.type)} p-4`}>
        <h3 className="text-white text-xl font-bold uppercase tracking-wider text-center">{pokemon.name}</h3>
      </div>
      <div className="p-6">
        <div className="flex justify-center mb-4">
          <div className="relative w-32 h-32">
            <div className="absolute inset-0 bg-gray-200 rounded-full animate-pulse"></div>
            <img
              src={pokemon.image}
              alt={pokemon.name}
              className="w-full h-full object-contain drop-shadow-md relative z-10"
              loading="lazy"
            />
          </div>
        </div>
        <div className="flex justify-between items-center text-sm text-gray-600">
          <span className="font-semibold">#{pokemon.id}</span>
          <span className="px-2 py-1 rounded-full text-xs font-bold text-white bg-opacity-80">
            {pokemon.type}
          </span>
        </div>
      </div>
    </div>
  );
};

export default PokemonCard;