'use client'

import * as motion from 'framer-motion/m'
import { Gift, Zap, Calendar, Ticket } from 'lucide-react'

interface OfferHeaderProps {
  title: string
  subtitle: string
  description: string
  icon: 'gift' | 'zap' | 'calendar' | 'ticket'
  badgeText: string
}

const icons = {
  gift: Gift,
  zap: Zap,
  calendar: Calendar,
  ticket: Ticket,
}

export default function OfferHeader({ title, subtitle, description, icon, badgeText }: OfferHeaderProps) {
  const Icon = icons[icon]

  return (
    <section className="relative overflow-hidden rounded-2xl mb-8">
      <div className="absolute inset-0 bg-gradient-primary opacity-90" />
      <div className="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full blur-3xl" />
      <div className="absolute bottom-0 left-0 w-80 h-80 bg-white/5 rounded-full blur-3xl" />
      
      <div className="relative z-10 px-6 py-12 md:px-10 md:py-16 text-center">
        <div className="max-w-3xl mx-auto">
          <motion.div
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            className="inline-flex items-center gap-2 bg-white/20 backdrop-blur-sm px-4 py-2 rounded-full mb-4 mx-auto"
          >
            <Icon size={16} className="text-white" />
            <span className="text-white text-sm font-medium uppercase tracking-wide">{badgeText}</span>
          </motion.div>
          
          <motion.h1
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.1 }}
            className="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-2"
          >
            {title}
          </motion.h1>
          
          <motion.p
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.15 }}
            className="text-white/80 text-lg"
          >
            {subtitle}
          </motion.p>
          
          <motion.p
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.2 }}
            className="text-white/70 text-sm mt-2 max-w-2xl mx-auto"
          >
            {description}
          </motion.p>
        </div>
      </div>
    </section>
  )
}