"use client";
import { motion, AnimatePresence } from "framer-motion";
import { ReactNode } from "react";
import { DRAWER_VARIANTS, SHEET_VARIANTS } from "./MotionConfig";
import { useMotionContext } from "./MotionProvider";

interface AnimatedDrawerProps {
  isOpen: boolean;
  children: ReactNode;
  direction?: "left" | "bottom";
  className?: string;
  style?: React.CSSProperties;
}

export function AnimatedDrawer({
  isOpen,
  children,
  direction = "left",
  className,
  style,
}: AnimatedDrawerProps) {
  const { reducedMotion } = useMotionContext();

  if (reducedMotion) {
    return isOpen ? <div className={className} style={style}>{children}</div> : null;
  }

  const variants = direction === "bottom" ? SHEET_VARIANTS : DRAWER_VARIANTS;

  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          className={className}
          style={{ ...style, willChange: "transform" }}
          variants={variants}
          initial="hidden"
          animate="visible"
          exit="exit"
        >
          {children}
        </motion.div>
      )}
    </AnimatePresence>
  );
}