import { motion } from 'motion/react';
import { getVariants, getViewportSettings } from '../utils/helpers';
import {
  staggerContainer,
  fastStaggerContainer,
  backgroundVariants
} from '../utils/animations';

interface SectionWrapperProps {
  id: string;
  children: React.ReactNode;
  containerType?: 'stagger' | 'fastStagger';
  backgroundGradient?: string;
  className?: string;
  isMobile?: boolean;
  variantType?: 'section' | 'card' | 'footer';
}

export function SectionWrapper({
  id,
  children,
  containerType = 'stagger',
  backgroundGradient,
  className = '',
  isMobile = false,
  variantType = 'section'
}: SectionWrapperProps) {
  const containerVariants = containerType === 'fastStagger' ? fastStaggerContainer : staggerContainer;
  const viewportType = variantType === 'footer' ? 'footer' : variantType;

  return (
    <motion.section
      id={id}
      className={`relative ${className}`}
      initial="hidden"
      whileInView="visible"
      viewport={getViewportSettings(viewportType)}
      variants={containerVariants}
    >
      {backgroundGradient && (
        <motion.div
          className={`absolute inset-0 ${backgroundGradient}`}
          variants={backgroundVariants}
        />
      )}
      
      <motion.div 
        className="relative z-10"
        variants={getVariants(variantType, isMobile)}
      >
        {children}
      </motion.div>
    </motion.section>
  );
}