import React, { 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-[calc(1rem+var(--sal))] pr-[calc(1rem+var(--sar))] py-16 sm:py-20 md:py-32 md:px-[calc(2rem+var(--sal))] md:pr-[calc(2rem+var(--sar))] lg:px-8 ${className}`}
    >
      {children}
    </section>
  );
}