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

export interface SectionProps {
  children: ReactNode;
  variant?: 'default' | 'dark' | 'muted';
  padding?: 'none' | 'sm' | 'md' | 'lg';
  id?: string;
}

export const Section = ({ 
  children, 
  variant = 'default',
  padding = 'md',
  id 
}: SectionProps) => {
  const variantClasses = {
    default: 'bg-[var(--ui-color-bg-base)]',
    dark: 'bg-black',
    muted: 'bg-[var(--ui-color-bg-surface)]',
  };

  const paddingClasses = {
    none: 'py-0',
    sm: 'py-8',
    md: 'py-16',
    lg: 'py-24',
  };

  const classes = [
    variantClasses[variant],
    paddingClasses[padding],
  ].join(' ');

  return (
    <section id={id} className={classes}>
      <Box marginX="auto" maxWidth="80rem" paddingX={4}>
        {children}
      </Box>
    </section>
  );
};
