import { Division, DivisionResult } from '@/lib/db/division';
import { toBn } from '@/lib/utils';

interface DivisionGridProps {
  divisions: Division[];
  divisionResults: DivisionResult[];
  selectedDivision: string | null;
  onSelect: (divisionId: string) => void;
}

export const DivisionGrid = ({
  divisions,
  divisionResults,
  selectedDivision,
  onSelect,
}: DivisionGridProps) => {
  return (
    <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-4 gap-2 sm:gap-3 md:gap-4 mb-6 sm:mb-8">
      {divisions.map((div, index) => {
        const result = divisionResults[index];
        const isSelected = selectedDivision === div.id;

        return (
          <div
            key={div.id}
            onClick={() => onSelect(div.id)}
            className={`bg-white rounded-xl shadow-sm border-2 cursor-pointer transition-all hover:shadow-lg hover:-translate-y-1 ${
              isSelected ? 'border-purple-500 ring-2 ring-purple-200' : 'border-gray-200'
            }`}
          >
            <div className="p-4">
              <div className="flex items-center justify-between mb-3">
                <div className="flex items-center gap-2">
                  <div className="w-3 h-3 rounded" style={{ backgroundColor: div.color }}></div>
                  <span className="font-bold text-gray-800">{div.nameBn}</span>
                </div>
                {isSelected ? (
                  <span className="material-symbols-outlined text-purple-600">check_circle</span>
                ) : (
                  <span className="text-xs text-gray-500">{toBn(div.seats)} আসন</span>
                )}
              </div>
              <div className="flex items-center justify-between text-xs text-gray-500">
                <span>আওয়ামী: {toBn(result.AL)}</span>
                <span>জাপা: {toBn(result.JP)}</span>
                <span>স্বতন্ত্র: {toBn(result.IND)}</span>
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
};