import { Candidate } from '@/lib/db/candidate';
import { toBn } from '@/lib/utils';
import Image from 'next/image';

interface CandidatePersonalTabProps {
  candidate: Candidate;
}

export function CandidatePersonalTab({ candidate }: CandidatePersonalTabProps) {
  return (
    <div className="animate-fade-in">
      <div className="bg-white rounded-3xl border border-blue-100 shadow-sm p-6 sm:p-8">
        <div className="flex flex-col md:flex-row gap-6 sm:gap-8 items-start">
          <div className="w-full md:w-1/3 aspect-square bg-gray-200 rounded-2xl overflow-hidden shadow-lg">
            <Image
              width={32}
              height={32}
              src={candidate.image}
              className="w-full h-full object-cover"
              alt={candidate.name}
              unoptimized
            />
          </div>
          <div className="w-full md:w-2/3">
            <h3 className="text-xl sm:text-2xl font-bold text-gray-900 mb-4">ব্যক্তিগত তথ্য</h3>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <div className="p-4 bg-gray-50 rounded-xl border border-gray-100">
                <span className="block text-xs font-bold text-gray-500 uppercase mb-1">জেলা</span>
                <span className="text-base sm:text-lg font-bold text-gray-900">
                  {candidate.district}
                </span>
              </div>
              <div className="p-4 bg-gray-50 rounded-xl border border-gray-100">
                <span className="block text-xs font-bold text-gray-500 uppercase mb-1">বয়স</span>
                <span className="text-base sm:text-lg font-bold text-gray-900">
                  {toBn(candidate.age)} বছর
                </span>
              </div>
              <div className="p-4 bg-gray-50 rounded-xl border border-gray-100">
                <span className="block text-xs font-bold text-gray-500 uppercase mb-1">শিক্ষা</span>
                <span className="text-sm sm:text-base font-bold text-gray-900">
                  {candidate.education}
                </span>
              </div>
              <div className="p-4 bg-gray-50 rounded-xl border border-gray-100">
                <span className="block text-xs font-bold text-gray-500 uppercase mb-1">পেশা</span>
                <span className="text-sm sm:text-base font-bold text-gray-900">
                  {candidate.profession}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}