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

export const HistoricalResultsWidget = ({ results }: { results: HistoricalResult[] }) => {
  return (
    <div className="bg-white border border-gray-200 rounded-3xl overflow-hidden">
      <div className="bg-linear-to-r from-gray-700 to-gray-800 text-white px-6 py-4">
        <h3 className="text-lg font-bold flex items-center gap-2">
          <span className="material-symbols-outlined">history</span>
          ঐতিহাসিক নির্বাচনী তথ্য (১৯৯১-২০২৪)
        </h3>
      </div>
      <div className="overflow-x-auto p-4">
        <table className="w-full text-sm">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-4 py-3 text-left font-bold text-gray-700">সাল</th>
              <th className="px-4 py-3 text-center font-bold text-green-700">আওয়ামী লীগ</th>
              <th className="px-4 py-3 text-center font-bold text-green-700">ভোট %</th>
              <th className="px-4 py-3 text-center font-bold text-red-700">বিএনপি</th>
              <th className="px-4 py-3 text-center font-bold text-red-700">ভোট %</th>
              <th className="px-4 py-3 text-center font-bold text-purple-700">জাতীয় পার্টি</th>
              <th className="px-4 py-3 text-center font-bold text-purple-700">ভোট %</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-4 py-3 font-bold text-gray-900">{result.year}</td>
                <td className="px-4 py-3 text-center text-green-600 font-bold">
                  {result.abamiSeats}
                </td>
                <td className="px-4 py-3 text-center text-green-600">{result.awamiVote}%</td>
                <td className="px-4 py-3 text-center text-red-600 font-bold">{result.bnpSeats}</td>
                <td className="px-4 py-3 text-center text-red-600">{result.bnpVote}%</td>
                <td className="px-4 py-3 text-center text-purple-600 font-bold">
                  {result.jatiyaSeats}
                </td>
                <td className="px-4 py-3 text-center text-purple-600">{result.jatiyaVote}%</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};