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

export interface SectionProps {
  children: ReactNode;
  variant?: 'default' | 'dark' | 'muted';
  padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
  id?: string;
  minHeight?: string;
  fullWidth?: boolean;
  maxWidth?: string;
  /** @deprecated Use semantic props instead. */
  className?: string;
}

export const Section = ({ 
  children, 
  variant = 'default',
  padding = 'md',
  id,
  minHeight,
  fullWidth = false,
  maxWidth = '80rem',
  className,
}: 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',
    xl: 'py-32',
  };

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

  return (
    <section id={id} className={classes} style={{ 
      ...(minHeight ? { minHeight } : {}),
    }}>
      {fullWidth ? (
        children
      ) : (
        <Box marginX="auto" maxWidth={maxWidth} paddingX={4}>
          {children}
        </Box>
      )}
    </section>
  );
};