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

interface HeroSectionProps {
  icon?: React.ElementType;
  title: string;
  description: string;
  stats: Array<{
    value: number | string;
    label: string;
    color: string;
    animate?: boolean;
  }>;
  ctaLabel?: string;
  ctaDescription?: string;
  onCtaClick?: () => void;
  className?: string;
}

export function HeroSection({
  icon: Icon = Users,
  title,
  description,
  stats,
  ctaLabel = "View Leaderboard",
  ctaDescription = "See full driver rankings",
  onCtaClick,
  className,
}: HeroSectionProps) {
  return (
    <div className={`relative mb-10 py-10 px-8 rounded-2xl bg-gradient-to-br from-primary-blue/20 via-iron-gray/80 to-deep-graphite border border-primary-blue/30 overflow-hidden ${className || ''}`}>
      {/* Background decoration */}
      <div className="absolute top-0 right-0 w-96 h-96 bg-primary-blue/10 rounded-full blur-3xl" />
      <div className="absolute bottom-0 left-0 w-64 h-64 bg-yellow-400/5 rounded-full blur-3xl" />
      <div className="absolute top-1/2 right-1/4 w-48 h-48 bg-performance-green/5 rounded-full blur-2xl" />

      <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>

          {/* Quick Stats */}
          <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">
                    {typeof stat.value === 'number' ? stat.value.toLocaleString() : 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"
            >
              <Trophy className="w-5 h-5" />
              {ctaLabel}
            </Button>
            <p className="text-xs text-gray-500 text-center">{ctaDescription}</p>
          </div>
        )}
      </div>
    </div>
  );
}