import { Election } from '@/lib/db/history';
import { toBn } from '@/lib/utils';

interface HistoryYearSelectorProps {
  elections: Election[];
  selectedYear: number;
  onYearSelect: (year: number) => void;
}

export const HistoryYearSelector = ({
  elections,
  selectedYear,
  onYearSelect,
}: HistoryYearSelectorProps) => {
  return (
    <div className="bg-white rounded-xl sm:rounded-2xl shadow-sm border border-gray-200 p-3 sm:p-4 mb-6 sm:mb-8">
      <h3 className="font-bold text-gray-800 mb-3 sm:mb-4 flex items-center gap-2 text-sm sm:text-base">
        <span className="material-symbols-outlined text-amber-600">calendar_month</span>
        নির্বাচনের বছর নির্বাচন করুন
      </h3>
      <div className="flex flex-wrap gap-2 sm:gap-3">
        {elections.map((election, index) => {
          const isActive = election.year === selectedYear;
          const isLatest = index === 0;
          return (
            <button
              key={election.year}
              onClick={() => onYearSelect(election.year)}
              className={`px-6 py-3 rounded-xl border-2 font-bold transition-all ${
                isActive
                  ? 'bg-blue-600 text-white border-blue-600 shadow-lg scale-105'
                  : 'bg-white text-gray-700 border-gray-300 hover:border-blue-400 hover:bg-blue-50'
              }`}
            >
              {isLatest && !isActive && (
                <span className="inline-block w-2 h-2 bg-red-500 rounded-sm mr-2 animate-pulse"></span>
              )}
              {toBn(election.year)}
              {isActive && <span className="ml-2 material-symbols-outlined text-sm">check</span>}
            </button>
          );
        })}
      </div>
    </div>
  );
};