'use client';

import { motion, useReducedMotion } from 'framer-motion';
import { ReactNode } from 'react';

type RevealProps = {
  children: ReactNode;
  direction?: 'left' | 'right';
};

export const Reveal = ({ children, direction = 'left' }: RevealProps) => {
  const shouldReduceMotion = useReducedMotion();

  return (
    <motion.div
      whileInView="visible"
      initial={
        shouldReduceMotion ? { opacity: 0 } : { opacity: 0, x: direction === 'left' ? -80 : 80 }
      }
      viewport={{
        once: true,
        amount: 0.3,
      }}
      variants={{
        hidden: {
          opacity: 0,
          x: direction === 'left' ? -80 : 80,
        },
        visible: {
          opacity: 1,
          x: 0,
          transition: {
            duration: 0.8,
            ease: 'easeOut',
          },
        },
      }}
    >
      {children}
    </motion.div>
  );
};