"use client"

import { ShoppingCart } from "lucide-react"
import { useState } from "react"

interface PromotionalBannerProps {
  banner: {
    id: number
    image: string
    title: string
    subtitle: string
    cta: string
  }
}

export function PromotionalBanner({ banner }: PromotionalBannerProps) {
  const [isHovered, setIsHovered] = useState(false)

  return (
    <section className="py-8 px-4">
      <div className="container mx-auto max-w-6xl">
        {/* Compact professional banner */}
        <div
          className="relative rounded-xl overflow-hidden shadow-lg transition-shadow duration-300 hover:shadow-xl"
          style={{
            backgroundImage: `url(${banner.image})`,
            backgroundSize: "cover",
            backgroundPosition: "center",
          }}
          onMouseEnter={() => setIsHovered(true)}
          onMouseLeave={() => setIsHovered(false)}
        >
          {/* Semi-transparent overlay for text readability */}
          <div className="absolute inset-0 bg-gradient-to-r from-black/60 to-black/40"></div>

          <div className="relative z-10 p-6 md:p-8 flex flex-col md:flex-row items-center justify-between gap-6">
            {/* Left side - Text content */}
            <div className="text-white max-w-2xl">
              <h3 className="text-2xl md:text-3xl font-bold mb-2">{banner.title}</h3>
              <p className="text-base md:text-lg opacity-90 line-clamp-2">{banner.subtitle}</p>
            </div>

            {/* Right side - CTA Button */}
            <button
              className={`flex-shrink-0 bg-green-500 hover:bg-green-600 text-white font-bold px-6 md:px-8 py-3 rounded-full flex items-center gap-2 transition-all ${
                isHovered ? "scale-105 shadow-lg" : ""
              }`}
            >
              <ShoppingCart className="w-5 h-5" />
              <span>{banner.cta}</span>
            </button>
          </div>
        </div>
      </div>
    </section>
  )
}
