'use client'

import * as motion from 'framer-motion/m'
import { Package, Sparkles } from 'lucide-react'

interface ProductHeaderProps {
  title: string
  subtitle?: string
  description?: string
  icon?: React.ReactNode
  badgeText?: string
  totalProducts?: number
  gradient?: string
  stats?: {
    label: string
    value: string
    icon?: React.ReactNode
  }[]
}

const defaultIcon = <Sparkles size={20} className="text-white" />

export default function ProductHeader({
  title,
  subtitle,
  description,
  icon = defaultIcon,
  badgeText = 'Our Collection',
  totalProducts,
  gradient = 'bg-gradient-primary',
  stats,
}: ProductHeaderProps) {
  return (
    <section className="relative overflow-hidden rounded-2xl mb-8">
      {/* Gradient Background */}
      <div className={`absolute inset-0 ${gradient} opacity-90`} />
      
      {/* Decorative Elements */}
      <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="absolute top-1/2 left-1/4 w-32 h-32 bg-white/5 rounded-full blur-2xl" />
      
      {/* Animated Orbs */}
      <motion.div
        animate={{ y: [0, -10, 0], x: [0, 5, 0] }}
        transition={{ duration: 4, repeat: Infinity }}
        className="absolute top-10 right-20 w-20 h-20 bg-white/10 rounded-full blur-xl"
      />
      <motion.div
        animate={{ y: [0, 10, 0], x: [0, -5, 0] }}
        transition={{ duration: 5, repeat: Infinity }}
        className="absolute bottom-10 left-32 w-28 h-28 bg-white/10 rounded-full blur-xl"
      />
      
      <div className="relative z-10 px-6 py-10 md:px-10 md:py-12">
        <div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
          {/* Left Side - Text Content */}
          <div>
            {/* Badge */}
            <motion.div
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.5 }}
              className="flex items-center gap-2 mb-3"
            >
              <div className="p-1.5 bg-white/20 rounded-lg backdrop-blur-sm">
                {icon}
              </div>
              <span className="text-white/90 text-sm font-medium uppercase tracking-wide">
                {badgeText}
              </span>
            </motion.div>
            
            {/* Title */}
            <motion.h1
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.5, delay: 0.1 }}
              className="text-3xl md:text-4xl lg:text-5xl font-bold text-white"
            >
              {title}
            </motion.h1>
            
            {/* Subtitle */}
            {subtitle && (
              <motion.p
                initial={{ opacity: 0, x: -20 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ duration: 0.5, delay: 0.15 }}
                className="text-white/80 text-lg mt-2"
              >
                {subtitle}
              </motion.p>
            )}
            
            {/* Description */}
            {description && (
              <motion.p
                initial={{ opacity: 0, x: -20 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ duration: 0.5, delay: 0.2 }}
                className="text-white/70 text-sm mt-2 max-w-2xl"
              >
                {description}
              </motion.p>
            )}
          </div>
          
          {/* Right Side - Stats / Product Count */}
          <div className="flex flex-col items-end gap-3">
            {totalProducts !== undefined && (
              <motion.div
                initial={{ opacity: 0, scale: 0.9 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ duration: 0.5, delay: 0.3 }}
                className="flex items-center gap-3 bg-white/20 backdrop-blur-sm px-5 py-3 rounded-full"
              >
                <Package size={18} className="text-white" />
                <span className="text-white font-semibold">
                  {totalProducts}+ Products
                </span>
              </motion.div>
            )}
            
            {/* Custom Stats */}
            {stats && (
              <motion.div
                initial={{ opacity: 0, scale: 0.9 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ duration: 0.5, delay: 0.35 }}
                className="flex flex-wrap justify-end gap-2"
              >
                {stats.map((stat) => (
                  <div
                    key={stat.label}
                    className="flex items-center gap-2 bg-white/20 backdrop-blur-sm px-4 py-2 rounded-full"
                  >
                    {stat.icon}
                    <span className="text-white text-sm font-medium">{stat.value}</span>
                    <span className="text-white/70 text-xs">{stat.label}</span>
                  </div>
                ))}
              </motion.div>
            )}
          </div>
        </div>
      </div>
    </section>
  )
}