import { Trophy, Plus } from 'lucide-react';
import Heading from '@/components/ui/Heading';
import Button from '@/components/ui/Button';

interface StatItem {
  value: number;
  label: string;
  color: string;
  animate?: boolean;
}

interface HeroSectionProps {
  icon?: React.ElementType;
  title: string;
  description: string;
  stats?: StatItem[];
  ctaLabel?: string;
  ctaDescription?: string;
  onCtaClick?: () => void;
  className?: string;
}

export function HeroSection({
  icon: Icon = Trophy,
  title,
  description,
  stats = [],
  ctaLabel = "Create League",
  ctaDescription = "Set up your own racing series",
  onCtaClick,
  className,
}: HeroSectionProps) {
  return (
    <div className={`relative mb-10 py-10 px-8 rounded-2xl bg-gradient-to-br from-iron-gray/80 via-deep-graphite to-iron-gray/60 border border-charcoal-outline/50 overflow-hidden ${className || ''}`}>
      {/* Background decoration */}
      <div className="absolute top-0 right-0 w-96 h-96 bg-primary-blue/5 rounded-full blur-3xl" />
      <div className="absolute bottom-0 left-0 w-64 h-64 bg-neon-aqua/5 rounded-full blur-3xl" />

      <div className="relative z-10 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-8">
        <div className="max-w-2xl">
          <div className="flex items-center gap-3 mb-4">
            <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-primary-blue/20 to-primary-blue/5 border border-primary-blue/20">
              <Icon className="w-6 h-6 text-primary-blue" />
            </div>
            <Heading level={1} className="text-3xl lg:text-4xl">
              {title}
            </Heading>
          </div>
          <p className="text-gray-400 text-lg leading-relaxed mb-6">
            {description}
          </p>

          {/* Stats */}
          {stats.length > 0 && (
            <div className="flex flex-wrap gap-6">
              {stats.map((stat, index) => (
                <div key={index} className="flex items-center gap-2">
                  <div className={`w-2 h-2 rounded-full ${stat.color} ${stat.animate ? 'animate-pulse' : ''}`} />
                  <span className="text-sm text-gray-400">
                    <span className="text-white font-semibold">{stat.value}</span> {stat.label}
                  </span>
                </div>
              ))}
            </div>
          )}
        </div>

        {/* CTA */}
        {onCtaClick && (
          <div className="flex flex-col gap-4">
            <Button
              variant="primary"
              onClick={onCtaClick}
              className="flex items-center gap-2 px-6 py-3"
            >
              <Plus className="w-5 h-5" />
              <span>{ctaLabel}</span>
            </Button>
            <p className="text-xs text-gray-500 text-center">{ctaDescription}</p>
          </div>
        )}
      </div>
    </div>
  );
}