import { AnimatePresence, motion } from "motion/react";
import clsx from "clsx";

interface ActionsSidebarWrapperProps {
  children: React.ReactNode;
  className?: string;
  show?: boolean;
}

function ActionsSidebarWrapper({
  children,
  className,
  show = true,
}: ActionsSidebarWrapperProps) {
  return (
    <AnimatePresence>
      {show && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          className={clsx(
            "flex 2xl:flex 2xl:gap-[0.556vw] 2xl:flex-col gap-2 max-2xl:p-2 max-2xl:rounded-[32px] absolute 2xl:top-1/2 2xl:-translate-y-1/2 2xl:right-[1.111vw] max-2xl:left-1/2 max-2xl:-translate-x-1/2 max-2xl:bottom-2 max-2xl:bg-[#00000026] max-2xl:backdrop-blur",
            className
          )}
        >
          {children}
        </motion.div>
      )}
    </AnimatePresence>
  );
}

export default ActionsSidebarWrapper;