import {
  Trophy,
  Award,
  Sparkles,
} from "lucide-react";

interface AnimalInfoProps {
  animal: any;
}

export default function AnimalInfo({ animal }: AnimalInfoProps) {
  return (
    <div className="w-full rounded-xl bg-gradient-to-r from-surface-dark via-[#3a2e26] to-surface-dark border border-primary/30 p-1">
      <div className="bg-background-dark/50 rounded-lg p-6 backdrop-blur-sm">
        <div className="flex items-center gap-3 mb-6">
          <Trophy className="text-yellow-500 w-8 h-8" />
          <div>
            <h3 className="text-white font-bold text-xl leading-tight uppercase">
              {animal?.championship_titles || 'Ejemplar Destacado'}
            </h3>
            <p className="text-slate-400 text-sm">Información del Ejemplar</p>
          </div>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {animal?.weight && (
            <div className="flex items-center gap-3 p-4 rounded-lg bg-white/5 border border-white/10 hover:bg-white/10 transition-colors">
              <div className="p-3 rounded-full border border-white/10 bg-white/5">
                <Trophy className="text-primary w-6 h-6" />
              </div>
              <div>
                <p className="text-white font-bold text-lg">{animal.weight} lbs</p>
                <p className="text-slate-500 text-xs uppercase font-bold tracking-wider">Peso</p>
              </div>
            </div>
          )}
          {animal?.height && (
            <div className="flex items-center gap-3 p-4 rounded-lg bg-white/5 border border-white/10 hover:bg-white/10 transition-colors">
              <div className="p-3 rounded-full border border-white/10 bg-white/5">
                <Award className="text-primary w-6 h-6" />
              </div>
              <div>
                <p className="text-white font-bold text-lg">{animal.height} in</p>
                <p className="text-slate-500 text-xs uppercase font-bold tracking-wider">Altura</p>
              </div>
            </div>
          )}
          {animal?.color && (
            <div className="flex items-center gap-3 p-4 rounded-lg bg-white/5 border border-white/10 hover:bg-white/10 transition-colors">
              <div className="p-3 rounded-full border border-white/10 bg-white/5">
                <Sparkles className="text-primary w-6 h-6" />
              </div>
              <div>
                <p className="text-white font-bold text-lg capitalize">{animal.color}</p>
                <p className="text-slate-500 text-xs uppercase font-bold tracking-wider">Color</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}