interface PromoSectionLargeProps {
  title: string;
  fullDescription?: string;
  pageHeaderBgImg?: string;
  pageHeaderMinVh?: string;
  pageHeaderRadius?: string;
  ctaText?: string;
  ctaHref?: string;
}

export default function PromoSectionLarge({
  title,
  fullDescription,
  pageHeaderBgImg,
  pageHeaderMinVh = '60vh',
  pageHeaderRadius,
  ctaText = 'ซื้อเลย',
  ctaHref = '/products'
}: PromoSectionLargeProps) {
  return (
    <section
      className="relative flex items-center justify-center overflow-hidden"
      style={{
        backgroundImage: pageHeaderBgImg ? `url(${pageHeaderBgImg})` : undefined,
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        minHeight: pageHeaderMinVh,
        borderRadius: pageHeaderRadius
      }}
    >
      {pageHeaderBgImg && <div className="absolute inset-0 bg-black/40" />}
      
      <div className="relative z-10 text-center text-white px-4">
        <h1 className="text-4xl md:text-5xl font-bold mb-4">{title}</h1>
        {fullDescription && (
          <p className="text-xl mb-8 max-w-2xl mx-auto">{fullDescription}</p>
        )}
        <a
          href={ctaHref}
          className="inline-block bg-white text-gray-900 px-8 py-3 rounded-lg font-medium hover:bg-gray-100 transition-colors"
        >
          {ctaText}
        </a>
      </div>
    </section>
  );
}