'use client'

import { motion } from 'framer-motion'
import { ReactNode } from 'react'
import { ANIMATION } from '@/lib/constants'

interface FadeInViewProps {
  children: ReactNode
  className?: string
  delay?: number
  direction?: 'up' | 'down' | 'left' | 'right' | 'none'
  duration?: number
}

const directionMap = {
  up: { y: 30 },
  down: { y: -30 },
  left: { x: 30 },
  right: { x: -30 },
  none: {},
}

export default function FadeInView({
  children,
  className = '',
  delay = 0,
  direction = 'up',
  duration = ANIMATION.duration,
}: FadeInViewProps) {
  return (
    <motion.div
      initial={{ opacity: 0, ...directionMap[direction] }}
      whileInView={{ opacity: 1, x: 0, y: 0 }}
      viewport={{ once: true, margin: '100px 0px -60px 0px' }}
      transition={{ duration, delay, ease: ANIMATION.ease }}
      className={className}
    >
      {children}
    </motion.div>
  )
}
