import { DivisionResult } from '../../dashboard.type';

export const DivisionResultsWidget = ({ results }: { results: DivisionResult[] }) => {
  return (
    <div className="bg-white border border-gray-200 rounded-3xl overflow-hidden mb-10">
      <div className="bg-linear-to-r from-purple-600 to-purple-700 text-white px-6 py-4">
        <h3 className="text-lg font-bold flex items-center gap-2">
          <span className="material-symbols-outlined">map</span>
          বিভাগভিত্তিক ফলাফল
        </h3>
      </div>
      <div className="overflow-x-auto">
        <table className="w-full">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-4 py-3 text-left text-xs font-bold text-gray-600 uppercase">
                বিভাগ
              </th>
              <th className="px-4 py-3 text-center text-xs font-bold text-gray-600 uppercase">
                আওয়ামী লীগ
              </th>
              <th className="px-4 py-3 text-center text-xs font-bold text-gray-600 uppercase">
                জাতীয় পার্টি
              </th>
              <th className="px-4 py-3 text-center text-xs font-bold text-gray-600 uppercase">
                স্বতন্ত্র
              </th>
              <th className="px-4 py-3 text-center text-xs font-bold text-gray-600 uppercase">
                মোট আসন
              </th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-100">
            {results.map((division, index) => (
              <tr key={index} className="hover:bg-gray-50">
                <td className="px-4 py-3 text-sm font-medium text-gray-900">{division.division}</td>
                <td className="px-4 py-3 text-center text-sm text-green-600 font-bold">
                  {division.awami}
                </td>
                <td className="px-4 py-3 text-center text-sm text-red-600 font-bold">
                  {division.jatiya}
                </td>
                <td className="px-4 py-3 text-center text-sm text-yellow-600 font-bold">
                  {division.independent}
                </td>
                <td className="px-4 py-3 text-center text-sm font-bold text-gray-900">
                  {division.total}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};