'use client'

import { motion, Transition } from 'framer-motion'
import React from 'react'
import { useMediaQuery } from '@/hooks/useMediaQuery'

type FadeInProps = {
  children: React.ReactNode
  transition?: Transition
  className?: string
}

export function FadeIn({ children, transition, className }: FadeInProps) {
  const isMobile = useMediaQuery('(max-width: 768px)')

  return (
    <motion.div
      className={className}
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: false, margin: isMobile ? '0px 0px -50px 0px' : '0px 0px -100px 0px' }}
      transition={transition || { duration: 0.5 }}
    >
      {children}
    </motion.div>
  )
}