components/NationCard.jsx

export default function NationCard({ nation, onSelect }) {
  return (
    <div 
      className="bg-white rounded-lg shadow-md p-4 cursor-pointer hover:shadow-lg transition-shadow"
      onClick={() => onSelect(nation)}
    >
      <div className="flex items-center space-x-4">
        <img 
          src={`https://flagcdn.com/w80/${nation.flagCode}.png`} 
          alt={`${nation.name} flag`} 
          className="w-12 h-8 object-cover"
        />
        <div>
          <h3 className="font-bold">{nation.name}</h3>
          <p className="text-sm text-gray-600">Population: {nation.population}</p>
        </div>
      </div>
    </div>
  )
}