import { toBn } from '@/lib/utils';

interface IncidentHotspotsProps {
  hotspots: [string, number][];
}

export const IncidentHotspots = ({ hotspots }: IncidentHotspotsProps) => {
  return (
    <div className="bg-white p-4 rounded-2xl shadow-lg border border-gray-100">
      <h4 className="font-bold text-gray-900 text-sm mb-3 flex items-center gap-2">
        <span className="material-symbols-outlined text-red-500">radar</span>
        ঝুঁকিপূর্ণ এলাকা
      </h4>
      <div className="space-y-2">
        {hotspots.length === 0 ? (
          <p className="text-sm text-gray-500 text-center">কোন তথ্য পাওয়া যায়নি</p>
        ) : (
          hotspots.map((item, index) => (
            <div
              key={item[0]}
              className={`flex items-center justify-between p-3 rounded-lg ${index === 0 ? 'bg-red-50 border border-red-100' : 'bg-gray-50'}`}
            >
              <div className="flex items-center gap-3">
                <span
                  className={`flex items-center justify-center w-6 h-6 rounded text-xs font-bold ${index === 0 ? 'bg-red-600 text-white' : 'bg-gray-200 text-gray-600'}`}
                >
                  {toBn(index + 1)}
                </span>
                <span className="font-medium text-gray-700">{item[0]}</span>
              </div>
              <span
                className={`text-sm font-bold ${index === 0 ? 'text-red-600' : 'text-gray-600'}`}
              >
                {toBn(item[1])}টি ঘটনা
              </span>
            </div>
          ))
        )}
      </div>
    </div>
  );
};