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

export function SeatOverview({ seatId, district }: SeatOverviewProps) {
  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-4 flex items-center gap-2">
        <span className="material-symbols-outlined text-amber-500">info</span>
        একনজরে আসন
      </h3>
      <div className="prose prose-sm text-slate-600 mb-4">
        <p className="mb-3 leading-relaxed">
          <strong>{seatId}</strong> আসনটি {district} জেলার একটি অত্যন্ত গুরুত্বপূর্ণ নির্বাচনী
          এলাকা। ভৌগোলিক ও রাজনৈতিকভাবে এই আসনের গুরুত্ব অপরিসীম।
        </p>
      </div>
      <div className="grid grid-cols-2 gap-3">
        <div className="bg-slate-50 p-3 rounded-lg text-center border border-slate-100">
          <p className="text-xs text-slate-400 uppercase font-bold">শিক্ষার হার</p>
          <p className="text-lg font-bold text-slate-700">
            {toBn(Math.floor(Math.random() * (85 - 55) + 55))}%
          </p>
        </div>
        <div className="bg-slate-50 p-3 rounded-lg text-center border border-slate-100">
          <p className="text-xs text-slate-400 uppercase font-bold">প্রতিষ্ঠান</p>
          <p className="text-lg font-bold text-slate-700">
            {toBn(Math.floor(Math.random() * (50 - 20) + 20))} টি
          </p>
        </div>
      </div>
    </div>
  );
}