import { Party } from '../../dashboard.type';
import { ParliamentMap } from './ParliamentMap';

export const ParliamentaryResults = ({ parties }: { parties: Party[] }) => {
  return (
    <div className="bg-white rounded-[2.5rem] border border-blue-100 shadow-xl overflow-hidden mb-12 transform hover:shadow-2xl transition-all duration-500">
      {/* Top Status Bar */}
      <div className="flex h-12 w-full overflow-hidden">
        <div
          className="bg-green-500 flex items-center px-6 text-white text-sm font-bold shadow-inner"
          style={{ width: '74.7%' }}
        >
          আওয়ামী লীগ (২২৪টি আসন)
        </div>
        <div className="bg-white flex-1 relative">
          <div className="absolute inset-0 bg-blue-50/50"></div>
        </div>
        <div
          className="bg-yellow-500 flex items-center px-6 text-gray-900 text-sm font-bold shadow-inner"
          style={{ width: '20.7%' }}
        >
          স্বতন্ত্র (৬২টি আসন)
        </div>
      </div>

      <div className="p-8 md:p-12 bg-linear-to-b from-slate-50 to-white">
        <div className="flex flex-wrap justify-center gap-4 mb-10">
          <div className="bg-orange-600 text-white px-8 py-2.5 rounded-xl text-sm font-bold shadow-lg hover:scale-105 transition">
            প্রাপ্ত আসন: ৩০০টি
          </div>
          <div className="bg-orange-600 text-white px-8 py-2.5 rounded-xl text-sm font-bold shadow-lg hover:scale-105 transition">
            মোট আসন: ৩০০টি
          </div>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
            <div className="bg-white p-5 rounded-3xl shadow-sm border border-gray-100 flex items-center gap-5 hover:border-green-200 hover:shadow-md transition">
              <div className="w-16 h-16 bg-green-50 rounded-2xl flex items-center justify-center border border-green-100 shrink-0">
                <span className="material-symbols-outlined text-green-600 text-3xl">
                  directions_boat
                </span>
              </div>
              <div className="flex-1">
                <h4 className="font-bold text-gray-900">আওয়ামী লীগ</h4>
                <p className="text-xs text-gray-500 font-bold mb-2">প্রাপ্ত: ২২৪টি</p>
                <div className="w-full h-2 bg-gray-100 rounded-xl overflow-hidden">
                  <div className="h-full bg-green-500 rounded-xl" style={{ width: '74.7%' }}></div>
                </div>
              </div>
            </div>
            <div className="bg-white p-5 rounded-3xl shadow-sm border border-gray-100 flex items-center gap-5 hover:border-red-200 hover:shadow-md transition">
              <div className="w-16 h-16 bg-red-50 rounded-2xl flex items-center justify-center border border-red-100 shrink-0">
                <span className="material-symbols-outlined text-red-600 text-3xl">agriculture</span>
              </div>
              <div className="flex-1">
                <h4 className="font-bold text-gray-900">জাতীয় পার্টি</h4>
                <p className="text-xs text-gray-500 font-bold mb-2">প্রাপ্ত: ১১টি</p>
                <div className="w-full h-2 bg-gray-100 rounded-xl overflow-hidden">
                  <div className="h-full bg-red-500 rounded-xl" style={{ width: '3.6%' }}></div>
                </div>
              </div>
            </div>
            <div className="bg-white p-5 rounded-3xl shadow-sm border border-gray-100 flex items-center gap-5 hover:border-yellow-200 hover:shadow-md transition">
              <div className="w-16 h-16 bg-yellow-50 rounded-2xl flex items-center justify-center border border-yellow-100 shrink-0">
                <span className="material-symbols-outlined text-yellow-600 text-3xl">
                  emoji_nature
                </span>
              </div>
              <div className="flex-1">
                <h4 className="font-bold text-gray-900">স্বতন্ত্র</h4>
                <p className="text-xs text-gray-500 font-bold mb-2">প্রাপ্ত: ৬২টি</p>
                <div className="w-full h-2 bg-gray-100 rounded-xl overflow-hidden">
                  <div className="h-full bg-yellow-500 rounded-xl" style={{ width: '20.6%' }}></div>
                </div>
              </div>
            </div>
            <div className="bg-white p-5 rounded-3xl shadow-sm border border-gray-100 flex items-center gap-5 hover:border-blue-200 hover:shadow-md transition">
              <div className="w-16 h-16 bg-blue-50 rounded-2xl flex items-center justify-center border border-blue-100 shrink-0">
                <span className="material-symbols-outlined text-blue-600 text-3xl">more_horiz</span>
              </div>
              <div className="flex-1">
                <h4 className="font-bold text-gray-900">অন্যান্য</h4>
                <p className="text-xs text-gray-500 font-bold mb-2">প্রাপ্ত: ৩টি</p>
                <div className="w-full h-2 bg-gray-100 rounded-xl overflow-hidden">
                  <div className="h-full bg-blue-500 rounded-xl" style={{ width: '1%' }}></div>
                </div>
              </div>
            </div>
          </div>

          <ParliamentMap parties={parties} />
        </div>
      </div>
    </div>
  );
};