import { ReactNode } from 'react';

interface SectionProps {
  variant?: 'default' | 'dark' | 'light';
  children: ReactNode;
  className?: string;
  id?: string;
}

export default function Section({
  variant = 'default',
  children,
  className = '',
  id
}: SectionProps) {
  const variantStyles = {
    default: 'bg-deep-graphite',
    dark: 'bg-iron-gray',
    light: 'bg-charcoal-outline'
  };

  return (
    <section
      id={id}
      className={`${variantStyles[variant]} px-6 py-32 sm:py-40 lg:px-8 ${className}`}
    >
      {children}
    </section>
  );
}