import { Tabs, TabsProps } from "@mui/material";
import { motion, AnimatePresence } from "framer-motion";
import { ReactElement, cloneElement } from "react";

interface AnimatedTabsProps extends TabsProps {}

export default function AnimatedTabs({ children, ...props }: AnimatedTabsProps) {
  return (
    <Tabs {...props}>
      <AnimatePresence>
        {(Array.isArray(children) ? children : [children]).map((child, index) => (
          <motion.div
            key={(child as ReactElement).key || index}
            layout // Enables smooth movement when order changes
            transition={{ type: "spring", stiffness: 300, damping: 30 }}
          >
            {cloneElement(child as ReactElement)}
          </motion.div>
        ))}
      </AnimatePresence>
    </Tabs>
  );
}