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

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

export function Hero({ children, variant = 'primary' }: HeroProps) {
  return (
    <Box 
      position="relative" 
      rounded="2xl" 
      overflow="hidden" 
      p={{ base: 6, md: 8 }}
      bg={variant === 'primary' ? 'bg-iron-gray/40' : 'bg-deep-graphite'}
      border
      borderColor="border-charcoal-outline"
    >
      {children}
    </Box>
  );
}