"use client";

import { Children, type ReactNode } from "react";
import {
  AnimatePresence,
  motion,
  type Transition,
  type Variants,
} from "motion/react";

type TransitionPanelProps = {
  activeIndex: number;
  children: ReactNode;
  variants: Variants;
  transition?: Transition;
  custom?: number;
};

export function TransitionPanel({
  activeIndex,
  children,
  variants,
  transition,
  custom,
}: TransitionPanelProps) {
  const paneller = Children.toArray(children);

  return (
    <div className="relative overflow-hidden">
      <AnimatePresence initial={false} custom={custom}>
        <motion.div
          key={activeIndex}
          custom={custom}
          variants={variants}
          initial="enter"
          animate="center"
          exit="exit"
          transition={transition}
        >
          {paneller[activeIndex]}
        </motion.div>
      </AnimatePresence>
    </div>
  );
}
