import React from 'react';
import { LucideIcon } from 'lucide-react';
import { Heading } from '@/ui/Heading';
import { Button } from '@/ui/Button';

interface HeroSectionProps {
  title: string;
  description?: string;
  icon?: LucideIcon;
  backgroundPattern?: React.ReactNode;
  stats?: Array<{
    icon?: LucideIcon;
    value: string | number;
    label: string;
    color?: string;
    animate?: boolean;
  }>;
  actions?: Array<{
    label: string;
    onClick: () => void;
    variant?: 'primary' | 'secondary';
    icon?: LucideIcon;
    description?: string;
  }>;
  children?: React.ReactNode;
  className?: string;
}

export const HeroSection = ({
  title,
  description,
  icon: Icon,
  backgroundPattern,
  stats,
  actions,
  children,
  className = ''
}: HeroSectionProps) => (
  <section className={`relative overflow-hidden rounded-2xl bg-gradient-to-br from-iron-gray/80 via-deep-graphite to-iron-gray/60 border border-charcoal-outline/50 ${className}`}>
    {/* Background Pattern */}
    {backgroundPattern || (
      <>
        <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 max-w-7xl mx-auto px-8 py-10">
      <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-8">
        {/* Main Content */}
        <div className="max-w-2xl">
          {Icon && (
            <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>
          )}
          {!Icon && (
            <Heading level={1} className="text-3xl lg:text-4xl mb-4">
              {title}
            </Heading>
          )}
          {description && (
            <p className="text-gray-400 text-lg leading-relaxed">
              {description}
            </p>
          )}

          {/* Stats */}
          {stats && stats.length > 0 && (
            <div className="flex flex-wrap gap-6 mt-6">
              {stats.map((stat, index) => (
                <div key={index} className="flex items-center gap-2">
                  {stat.icon ? (
                    <stat.icon className={`w-4 h-4 ${stat.color || 'text-primary-blue'}`} />
                  ) : (
                    <div className={`w-2 h-2 rounded-full ${stat.color || 'bg-primary-blue'} ${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>

        {/* Actions or Custom Content */}
        {actions && actions.length > 0 && (
          <div className="flex flex-col gap-4">
            {actions.map((action, index) => (
              <div key={index} className="flex flex-col gap-2">
                <Button
                  variant={action.variant || 'primary'}
                  onClick={action.onClick}
                  className="flex items-center gap-2 px-6 py-3"
                >
                  {action.icon && <action.icon className="w-5 h-5" />}
                  {action.label}
                </Button>
                {action.description && (
                  <p className="text-xs text-gray-500 text-center">{action.description}</p>
                )}
              </div>
            ))}
          </div>
        )}

        {children}
      </div>
    </div>
  </section>
);