import { motion } from 'framer-motion'

import { useClientMotion } from '@/lib/useClientMotion'
import { cn } from '@/lib/utils'

import type { ReactNode } from 'react'


const AnimatedCollapse = ({ open, children, id, className }: {
    open: boolean; children: ReactNode; id?: string; className?: string },
) => {
  const motionSettings = useClientMotion ()
  return <motion.div id={id} initial={false} aria-hidden={!open} inert={!open}
      animate={{ height: open ? 'auto' : 0, opacity: open ? 1 : 0 }}
      transition={motionSettings.transition ('collapse')}
      className={cn ('min-h-0 overflow-hidden', className)}>
    {children}
  </motion.div>
}


export default AnimatedCollapse