import React from 'react';

interface SectionProps {
  children: React.ReactNode;
  className?: string;
  background?: 'white' | 'gray' | 'primary-light' | 'primary';
  id?: string;
}

/**
 * Reusable Section component for page layout
 * Provides consistent spacing and background options
 */
export const Section: React.FC<SectionProps> = ({
  children,
  className = '',
  background = 'white',
  id
}) => {
  const backgrounds = {
    white: 'bg-white',
    gray: 'bg-neutral-50',
    'primary-light': 'bg-primary-50',
    primary: 'bg-primary-500 text-neutral-900'
  };
  
  return (
    <section 
      id={id}
      className={`py-20 md:py-24 ${backgrounds[background]} ${className}`}
    >
      <div className="container-custom max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {children}
      </div>
    </section>
  );
};