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

interface SectionProps {
  children: ReactNode;
  className?: string;
  title?: string;
  description?: string;
  variant?: 'default' | 'card' | 'highlight' | 'dark' | 'light';
  id?: string;
  py?: number;
  minHeight?: string;
  borderBottom?: boolean;
  borderColor?: string;
  overflow?: 'hidden' | 'visible' | 'auto' | 'scroll';
  position?: 'relative' | 'absolute' | 'fixed' | 'sticky';
}

export function Section({ 
  children, 
  className = '',
  title,
  description,
  variant = 'default',
  id,
  py = 16,
  minHeight,
  borderBottom,
  borderColor,
  overflow,
  position
}: SectionProps) {
  const variantClasses = {
    default: '',
    card: 'bg-panel-gray rounded-none p-6 border border-border-gray',
    highlight: 'bg-gradient-to-r from-primary-accent/10 to-transparent rounded-none p-6 border border-primary-accent/30',
    dark: 'bg-graphite-black',
    light: 'bg-panel-gray'
  };
  
  const classes = [
    variantClasses[variant],
    className
  ].filter(Boolean).join(' ');
  
  return (
    <Box 
      as="section" 
      id={id} 
      className={classes} 
      py={py as 0} 
      px={4} 
      minHeight={minHeight}
      borderBottom={borderBottom}
      borderColor={borderColor}
      overflow={overflow}
      position={position}
    >
      <Box className="mx-auto max-w-7xl">
        {(title || description) && (
          <Box mb={8}>
            {title && <Heading level={2}>{title}</Heading>}
            {description && <Text color="text-gray-400" block mt={2}>{description}</Text>}
          </Box>
        )}
        {children}
      </Box>
    </Box>
  );
}