import React from 'react';
import { motion } from 'framer-motion';

const Section = ({ 
  children, 
  className = "", 
  background = "dark", 
  padding = "large",
  animate = true 
}) => {
  const paddingClasses = {
    small: "py-12 px-6",
    medium: "py-16 px-6", 
    large: "py-24 px-6",
    xlarge: "py-32 px-6"
  };

  const backgroundClasses = {
    dark: "bg-black",
    darker: "bg-gray-900",
    gradient: "bg-gradient-to-br from-gray-900 to-black",
    transparent: "bg-transparent"
  };

  const content = (
    <section className={`${backgroundClasses[background]} ${paddingClasses[padding]} ${className}`}>
      <div className="max-w-7xl mx-auto">
        {children}
      </div>
    </section>
  );

  if (animate) {
    return (
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        whileInView={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.6 }}
        viewport={{ once: true, margin: "-100px" }}
      >
        {content}
      </motion.div>
    );
  }

  return content;
};

export default Section;