import React, { ReactNode } from 'react';
import { Box } from './Box';

interface HeroProps {
  children: ReactNode;
  className?: string;
  variant?: 'default' | 'primary' | 'secondary';
}

export function Hero({ children, className = '', variant = 'default' }: HeroProps) {
  const baseClasses = 'relative overflow-hidden rounded-2xl border p-8';
  
  const variantClasses = {
    default: 'bg-iron-gray border-charcoal-outline',
    primary: 'bg-gradient-to-br from-iron-gray via-iron-gray to-charcoal-outline border-charcoal-outline',
    secondary: 'bg-gradient-to-br from-primary-blue/10 to-purple-600/10 border-primary-blue/20'
  };

  const classes = [baseClasses, variantClasses[variant], className].filter(Boolean).join(' ');

  return (
    <Box className={classes}>
      <Box className="absolute top-0 right-0 w-64 h-64 bg-primary-blue/5 rounded-full blur-3xl" />
      <Box className="absolute bottom-0 left-0 w-48 h-48 bg-performance-green/5 rounded-full blur-3xl" />
      <Box className="relative z-10">
        {children}
      </Box>
    </Box>
  );
}