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

interface Props {
  children: ReactNode;
  delay?: number;
  direction?: 'up' | 'down' | 'left' | 'right' | 'none';
  once?: boolean;
  className?: string;
}

const variants = {
  up: { y: 30, opacity: 0, filter: 'blur(8px)' },
  down: { y: -30, opacity: 0, filter: 'blur(8px)' },
  left: { x: -30, opacity: 0, filter: 'blur(8px)' },
  right: { x: 30, opacity: 0, filter: 'blur(8px)' },
  none: { opacity: 0, filter: 'blur(8px)' },
};

export default function Reveal({
  children,
  delay = 0,
  direction = 'up',
  once = true,
  className = '',
}: Props) {
  const ref = useRef<HTMLDivElement>(null);
  const inView = useInView(ref, { once, margin: '-50px' });
  const initial = variants[direction];

  return (
    <motion.div
      ref={ref}
      className={className}
      initial={initial}
      animate={inView ? { x: 0, y: 0, opacity: 1, filter: 'blur(0px)' } : initial}
      transition={{ duration: 0.8, delay, ease: [0.22, 1, 0.36, 1] }}
    >
      {children}
    </motion.div>
  );
}
