import { Candidate } from '@/type/candidate.type';
import Image from 'next/image';

export function CandidateListItem({ candidate }: { candidate: Candidate }) {
  return (
    <div className="flex items-center gap-3 p-2 rounded-xl hover:bg-gray-50 transition-colors cursor-pointer">
      <Image
        width={40}
        height={40}
        src={candidate.photo_file || ''}
        alt={candidate.name_bn}
        className="w-10 h-10 rounded-full bg-gray-200 object-cover border border-gray-100"
      />
      <div className="flex-1 min-w-0">
        <h4 className="text-sm font-bold text-gray-900 leading-tight truncate px-1">
          {candidate.name_bn}
        </h4>
        <div className="flex items-center gap-1.5 text-xs text-gray-500 mt-0.5 px-1">
          <span
            className={`w-1.5 h-1.5 rounded-full ${
              candidate.party.name_bn.includes('আওয়ামী')
                ? 'bg-green-600'
                : candidate.party.name_bn.includes('বিএনপি')
                  ? 'bg-blue-600'
                  : candidate.party.name_bn.includes('জাতীয় পার্টি')
                    ? 'bg-orange-500'
                    : 'bg-purple-500'
            }`}
          ></span>
          <span className="truncate">{candidate.party.name_bn}</span>
        </div>
      </div>
      <Image
        width={32}
        height={32}
        src={candidate.party.symbol || ''}
        alt="Symbol"
        className="w-8 h-8 opacity-80 mix-blend-multiply"
      />
    </div>
  );
}