// components/SearchResultItem.tsx
import React, { forwardRef } from 'react';
import type { PokemonData } from '../types/pokemon';
interface SearchResultItemProps {
pokemon: PokemonData;
onSelect: (pokemon: PokemonData, sourceImageRef?: HTMLImageElement) => void;
highlightedName?: string;
}
const SearchResultItem = forwardRef<HTMLDivElement, SearchResultItemProps>(({
pokemon,
onSelect,
highlightedName
}, ref) => {
const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
const img = e.currentTarget.querySelector('img') as HTMLImageElement;
onSelect(pokemon, img || undefined);
};
const getTypeColor = (type: string): string => {
const colors: Record<string, string> = {
normal: 'bg-gray-400',
fire: 'bg-red-500',
water: 'bg-blue-500',
electric: 'bg-yellow-400',
grass: 'bg-green-500',
ice: 'bg-blue-300',
fighting: 'bg-red-700',
poison: 'bg-purple-500',
ground: 'bg-yellow-600',
flying: 'bg-indigo-400',
psychic: 'bg-pink-500',
bug: 'bg-green-400',
rock: 'bg-yellow-800',
ghost: 'bg-purple-700',
dragon: 'bg-indigo-700',
dark: 'bg-gray-800',
steel: 'bg-gray-500',
fairy: 'bg-pink-300'
};
return colors[type.toLowerCase()] || 'bg-gray-400';
};
return (
<div
ref={ref}
onClick={handleClick}
className="bg-white/5 rounded-xl p-4 border border-white/10 cursor-pointer transform-gpu will-change-transform pokemon-card"
>
<div className="card-content">
<div className="flex items-center justify-between mb-3">
<h3 className="text-lg font-bold">
{highlightedName ? (
<span dangerouslySetInnerHTML={{ __html: highlightedName }} />
) : (
pokemon.name
)}
</h3>
{(pokemon.image || pokemon.sprite) && (
<img
src={pokemon.image || pokemon.sprite}
alt={pokemon.name}
className="w-12 h-12 object-contain pokemon-image transform-gpu will-change-transform"
loading="lazy"
/>
)}
</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>
)}
{pokemon.stats?.total && (
<div>Base Total: {pokemon.stats.total}</div>
)}
</div>
</div>
</div>
);
});
export default SearchResultItem;
