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

export function SeatDetailsBanner({
  seatId,
  district,
  totalVoters,
  totalCenters,
  turnoutPercent,
}: SeatDetailsBannerProps) {
  const seatNum = seatId.match(/\d+/);

  return (
    <div className="relative bg-linear-to-r from-slate-900 to-slate-800 text-white py-8 sm:py-12 overflow-hidden shadow-lg">
      <div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-10"></div>
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
          <div>
            <div className="flex items-center gap-2 text-slate-300 text-sm mb-3">
              <a href="/" className="hover:text-white transition">
                হোম
              </a>
              <span className="material-symbols-outlined text-xs">chevron_right</span>
              <a href="/seats" className="hover:text-white transition">
                আসনসমূহ
              </a>
              <span className="material-symbols-outlined text-xs">chevron_right</span>
              <span className="text-white font-bold bg-white/10 px-2 py-0.5 rounded text-xs">
                {seatId}
              </span>
            </div>
            <h1 className="text-3xl sm:text-5xl font-bold mb-2 tracking-tight">{seatId}</h1>
            <div className="flex items-center gap-4 text-slate-300">
              <p className="text-lg flex items-center gap-1">
                <span className="material-symbols-outlined text-emerald-400">location_on</span>
                <span>{district}</span>
              </p>
              <span className="w-1 h-1 rounded-full bg-slate-500"></span>
              <p className="text-sm bg-emerald-500/20 text-emerald-300 px-2 py-0.5 rounded border border-emerald-500/30">
                সংসদীয় আসন নং {seatNum ? toBn(seatNum[0]) : '---'}
              </p>
            </div>
          </div>

          {/* Key Stats Cards */}
          <div className="flex gap-3 overflow-x-auto pb-2 md:pb-0 w-full md:w-auto">
            <div className="bg-white/5 backdrop-blur-md border border-white/10 rounded-xl p-3 text-center min-w-[120px] flex-1">
              <p className="text-slate-400 text-[10px] uppercase tracking-wider font-bold mb-1">
                মোট ভোটার
              </p>
              <p className="text-xl font-bold text-white">{toBn(totalVoters.toLocaleString())}</p>
            </div>
            <div className="bg-white/5 backdrop-blur-md border border-white/10 rounded-xl p-3 text-center min-w-[120px] flex-1">
              <p className="text-slate-400 text-[10px] uppercase tracking-wider font-bold mb-1">
                কেন্দ্র সংখ্যা
              </p>
              <p className="text-xl font-bold text-white">{toBn(totalCenters)}</p>
            </div>
            <div className="bg-emerald-600/20 backdrop-blur-md border border-emerald-500/30 rounded-xl p-3 text-center min-w-[120px] flex-1">
              <p className="text-emerald-200 text-[10px] uppercase tracking-wider font-bold mb-1">
                লাইভ কাস্টিং
              </p>
              <p className="text-xl font-bold text-emerald-400">{toBn(turnoutPercent)}%</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}