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

export const PartyResultsWidget = ({ results }: { results: PartyResult[] }) => {
  return (
    <div className="lg:col-span-2 bg-white border border-gray-200 rounded-3xl overflow-hidden">
      <div className="bg-linear-to-r from-blue-600 to-blue-700 text-white px-6 py-4">
        <h3 className="text-lg font-bold flex items-center gap-2">
          <span className="material-symbols-outlined">table_chart</span>
          দলীয় ফলাফল
        </h3>
      </div>
      <div className="overflow-x-auto">
        <table className="w-full">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-6 py-3 text-left text-xs font-bold text-gray-600 uppercase">দল</th>
              <th className="px-6 py-3 text-center text-xs font-bold text-gray-600 uppercase">
                প্রতীক
              </th>
              <th className="px-6 py-3 text-center text-xs font-bold text-gray-600 uppercase">
                আসন
              </th>
              <th className="px-6 py-3 text-center text-xs font-bold text-gray-600 uppercase">
                ভোট %
              </th>
              <th className="px-6 py-3 text-center text-xs font-bold text-gray-600 uppercase">
                পরিবর্তন
              </th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-100">
            {results.map((result, index) => (
              <tr key={index} className="hover:bg-gray-50">
                <td className="px-6 py-4 text-sm font-medium text-gray-900">{result.party}</td>
                <td className="px-6 py-4 text-center text-2xl">{result.symbol}</td>
                <td className="px-6 py-4 text-center text-sm font-bold text-gray-900">
                  {result.seats}
                </td>
                <td className="px-6 py-4 text-center text-sm text-gray-600">
                  {result.votePercent}%
                </td>
                <td className="px-6 py-4 text-center text-sm">
                  <span
                    className={`font-bold ${result.change >= 0 ? 'text-green-600' : 'text-red-600'}`}
                  >
                    {result.change >= 0 ? '+' : ''}
                    {result.change}
                  </span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};