import React, { FC, ReactNode } from 'react';
import { motion, AnimatePresence } from 'framer-motion';

interface FadeInProps {
  initial?: { x: number; y: number; opacity: number };
  whileInView?: { x: number; y: number; opacity: number };
  viewport?: { once?: boolean; amount?: number; margin?: string };
  delay?: number;
  duration?: number;
  className?: string;
  children: ReactNode;
}

/**
 * Framer Motion wrapper for elements that fade in when visible.
 */
export const FadeIn: FC<FadeInProps> = ({
  initial = { x: 0, y: 0, opacity: 0 },
  whileInView = { x: 0, y: 0, opacity: 1 },
  viewport = { once: true, amount: 0 },
  delay = 0,
  duration = 0.7,
  className = '',
  children,
}) => {
  return (
    <motion.div
      initial={initial}
      whileInView={whileInView}
      viewport={viewport}
      transition={{ delay, duration, ease: [0.25, 0.1, 0.25, 1] }}
      className={className}
    >
      {children}
    </motion.div>
  );
};