import { toBn } from '@/lib/utils';
import type { HistoricalTimelineProps } from '../../seat.type';

export function HistoricalTimeline({ historyData }: HistoricalTimelineProps) {
  return (
    <div className="bg-white rounded-2xl shadow-sm border border-slate-200 p-6">
      <h3 className="text-lg font-bold text-slate-800 mb-6 flex items-center gap-2">
        <span className="material-symbols-outlined text-purple-600">history</span>
        নির্বাচনী ইতিহাস (১৯৯১ - ২০২৪)
      </h3>
      <div className="relative border-l-2 border-slate-100 ml-3 space-y-8">
        {historyData.map((data, index) => {
          let colorClass = 'bg-slate-200';
          let textClass = 'text-slate-600';
          if (data.winner.includes('আওয়ামী')) {
            colorClass = 'bg-emerald-500';
            textClass = 'text-emerald-700';
          } else if (data.winner.includes('বিএনপি')) {
            colorClass = 'bg-blue-500';
            textClass = 'text-blue-700';
          } else if (data.winner.includes('জাতীয়')) {
            colorClass = 'bg-yellow-500';
            textClass = 'text-yellow-700';
          }

          return (
            <div key={index} className="relative pl-8 group">
              <span
                className={`absolute -left-[9px] top-1.5 w-4 h-4 rounded-full ${colorClass} border-4 border-white shadow-sm group-hover:scale-125 transition-transform`}
              ></span>
              <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 mb-2">
                <h4 className="font-bold text-slate-800 text-lg">{toBn(data.year)} নির্বাচন</h4>
                <span
                  className={`text-xs font-bold ${textClass} bg-opacity-10 bg-slate-100 px-2 py-1 rounded border border-current opacity-80`}
                >
                  {data.winner}
                </span>
              </div>
              <div className="bg-slate-50 p-4 rounded-xl border border-slate-100 hover:shadow-md transition">
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <p className="text-xs text-slate-400 uppercase font-bold">বিজয়ী ব্যবধান</p>
                    <p className="font-bold text-slate-700">
                      {toBn(data.margin.toLocaleString())} ভোট
                    </p>
                  </div>
                  <div className="text-right">
                    <p className="text-xs text-slate-400 uppercase font-bold">ভোট প্রদান</p>
                    <p className="font-bold text-slate-700">{toBn(data.turnout)}%</p>
                  </div>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}