import Link from 'next/link';
import Image from 'next/image';
import { Party } from '@/lib/db/parties';

interface PartyDetailsBannerProps {
  party: Party;
}

const PartyDetailsBanner = ({ party }: PartyDetailsBannerProps) => {
  return (
    <div className={`bg-linear-to-r ${party.gradient} relative overflow-hidden`}>
      <div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-30"></div>
      <div className="absolute -bottom-16 -right-16 w-64 h-64 bg-white opacity-10 rounded-full blur-3xl"></div>

      <div className="max-w-7xl mx-auto px-3 sm:px-4 lg:px-8 relative z-10">
        {/* Back Button */}
        <Link
          href="/parties"
          className="inline-flex items-center gap-2 text-white/80 hover:text-white transition-colors pt-20 sm:pt-24 pb-4"
        >
          <span className="material-symbols-outlined">arrow_back</span>
          <span>দলসমূহের তালিকায় ফিরে যান</span>
        </Link>

        <div className="flex flex-col md:flex-row items-start md:items-center gap-4 sm:gap-6 py-4 sm:py-8">
          <div className="w-20 h-20 sm:w-28 sm:h-28 bg-white rounded-2xl sm:rounded-3xl p-3 sm:p-4 shadow-xl flex items-center justify-center shrink-0">
            {party.symbolImg ? (
              <Image
                src={party.symbolImg}
                alt={party.symbolAbbr}
                width={112}
                height={112}
                className="w-full h-full object-contain"
              />
            ) : party.symbolIcon ? (
              <span className={`material-symbols-outlined text-4xl ${party.iconColor}`}>
                {party.symbolIcon}
              </span>
            ) : null}
          </div>
          <div className="text-white">
            <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold mb-2">{party.name}</h1>
            <span className="bg-white/20 backdrop-blur-md text-white px-3 py-1 rounded-full text-sm sm:text-base font-bold border border-white/30">
              {party.symbolAbbr}
            </span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default PartyDetailsBanner;