"use client";

import { AnimatePresence, motion } from "framer-motion";

interface AnimatedSectionProps {
  show: boolean;
  children: React.ReactNode;
  delay?: number;
}

export function AnimatedSection({ show, children, delay = 0 }: AnimatedSectionProps) {
  return (
    <AnimatePresence initial={false}>
      {show && (
        <motion.div
          initial={{ height: 0, opacity: 0 }}
          animate={{ height: "auto", opacity: 1 }}
          exit={{ height: 0, opacity: 0 }}
          transition={{ duration: 0.5, ease: "easeOut", delay: delay / 1000 }}
          style={{ overflow: "hidden" }}
        >
          {children}
        </motion.div>
      )}
    </AnimatePresence>
  );
}
