import React, { useEffect, useRef } from 'react';
import { getTypeColor } from '../utils/pokemon';
import { useGSAPAnimations } from '../hooks/useGSAPAnimations';
import type { PokemonData } from '../types/pokemon';
interface SearchResultsProps {
results: PokemonData[];
onPokemonSelect: (pokemon: PokemonData) => void;
}
const SearchResults: React.FC<SearchResultsProps> = ({ results, onPokemonSelect }) => {
const cardRefs = useRef<HTMLElement[]>([]);
const { animateCardsEntrance, createCardHoverAnimation } = useGSAPAnimations();
useEffect(() => {
if (results.length > 0 && cardRefs.current.length > 0) {
// Animate cards entering with stagger effect
animateCardsEntrance(cardRefs.current);
// Set up hover animations for each card
const cleanupFunctions = cardRefs.current.map(createCardHoverAnimation);
return () => {
cleanupFunctions.forEach(cleanup => cleanup());
};
}
}, [results, animateCardsEntrance, createCardHoverAnimation]);
if (results.length === 0) return null;
return (
<div className="bg-white/10 backdrop-blur-lg rounded-2xl p-8 mb-8 border border-white/20">
<div className="flex justify-between items-center mb-6">
<h2 className="text-2xl font-bold">Search Results ({results.length} Pokemon found)</h2>
<p className="text-sm text-gray-300">
Click any Pokemon for detailed analysis
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{results.map((pokemon, index) => (
<div
key={index}
ref={el => {
if (el) cardRefs.current[index] = el;
}}
className="bg-white/5 rounded-xl p-4 border border-white/10 cursor-pointer transform-gpu will-change-transform pokemon-card"
onClick={() => onPokemonSelect(pokemon)}
>
<div className="card-content">
<div className="flex items-center justify-between mb-3">
<h3 className="text-lg font-bold">{pokemon.name}</h3>
{pokemon.image && (
<img
src={pokemon.image}
alt={pokemon.name}
className="w-12 h-12 object-contain pokemon-image transform-gpu will-change-transform"
/>
)}
</div>
<div className="flex flex-wrap gap-2 mb-2">
{pokemon.types.map((type) => (
<span
key={type}
className={`px-2 py-1 rounded text-white text-xs font-semibold ${getTypeColor(type)} transform-gpu will-change-transform`}
>
{type}
</span>
))}
</div>
<div className="text-sm text-gray-300 space-y-1">
{pokemon.battleRole && (
<div>Role: {pokemon.battleRole}</div>
)}
{pokemon.competitiveTier && (
<div>Tier: {pokemon.competitiveTier}</div>
)}
<div>Stats: {pokemon.stats.total}</div>
</div>
</div>
</div>
))}
</div>
</div>
);
};
export default SearchResults;
