import { container } from '@/lib/utils';
import React from 'react';

export interface SectionProps {
  children: React.ReactNode;
  background?: 'white' | 'light' | 'dark' | 'pattern' | 'gradient';
  spacing?: 'xs' | 'small' | 'medium' | 'large' | 'none';
  fullWidth?: boolean;
  className?: string;
}

export function Section({
  children,
  background = 'white',
  spacing = 'medium',
  fullWidth = false,
  className = '',
}: SectionProps) {
  // Background styles
  const backgroundClasses = {
    white: 'bg-white',
    light: 'bg-gray-50',
    dark: 'bg-gray-900 text-white',
    pattern: 'bg-white bg-[url("/assets/patterns/dots.svg")] bg-repeat',
    gradient: 'bg-gradient-to-b from-white to-gray-100',
  };

  const spacingClasses = {
    none: 'py-0',
    xs: 'py-[64px] md:py-[80px]',
    small: 'py-6 md:py-8',
    medium: 'py-[80px] md:py-[112px]',
    large: 'py-[80px] md:py-[112px]',
  };

  return (
    <section 
      className={`w-full ${backgroundClasses[background]} ${spacingClasses[spacing]} ${className}`}
    >
      <div className={fullWidth ? 'w-full' : container}>
        {children}
      </div>
    </section>
  );
}