import { ReactNode } from 'react';
import { motion, useInView } from 'framer-motion';
import React, { useRef } from 'react';

interface ScrollRevealProps {
  children: React.ReactNode;
  width?: 'fit-content' | '100%';
  delay?: number;
  duration?: number;
  direction?: 'up' | 'down' | 'left' | 'right';
  className?: string;
}

const ScrollReveal: React.FC<ScrollRevealProps> = ({
  children,
  width = 'fit-content',
  delay = 0,
  duration = 0.5,
  direction = 'up',
  className = ""
}) => {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: "-50px 0px" }); // Trigger slightly before element is fully in view

  const getDirectionOffset = () => {
    switch (direction) {
      case 'up': return { y: 75 };
      case 'down': return { y: -75 };
      case 'left': return { x: 75 };
      case 'right': return { x: -75 };
      default: return { y: 75 };
    }
  };

  return (
    <div ref={ref} style={{ position: 'relative', width, overflow: 'hidden' }} className={className}>
      <motion.div
        variants={{
          hidden: { opacity: 0, ...getDirectionOffset() },
          visible: { opacity: 1, x: 0, y: 0 },
        }}
        initial="hidden"
        animate={isInView ? "visible" : "hidden"}
        transition={{ duration, delay, ease: "easeOut" }}
      >
        {children}
      </motion.div>
    </div>
  );
};

export default ScrollReveal;