"use client";

import { motion } from "framer-motion";
import type { ReactNode } from "react";

export function MotionContent({ children }: { children: ReactNode }) {
  return (
    <motion.div
      key="content"
      initial={{
        height: 0,
        opacity: 0,
        y: -4,
        clipPath: "inset(0 0 100% 0 round 12px)",
      }}
      animate={{
        height: "auto",
        opacity: 1,
        y: 0,
        clipPath: "inset(0 0 0% 0 round 12px)",
      }}
      exit={{
        height: 0,
        opacity: 0,
        y: -6,
        clipPath: "inset(0 0 100% 0 round 12px)",
      }}
      transition={{ type: "spring", stiffness: 240, damping: 26, mass: 0.8 }}
      className="px-4 pb-4 pt-0"
    >
      {children}
    </motion.div>
  );
}