"use client";

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

/* ------------------------------------------------------------------ */
/*  StaggerList                                                       */
/* ------------------------------------------------------------------ */

interface StaggerListProps {
  children: ReactNode;
  staggerDelay?: number;
  className?: string;
  as?: "div" | "ul" | "ol" | "tbody";
}

const containerVariants: (stagger: number) => Variants = (stagger) => ({
  hidden: {},
  visible: {
    transition: {
      staggerChildren: stagger,
    },
  },
});

const MotionComponents = {
  div: motion.div,
  ul: motion.ul,
  ol: motion.ol,
  tbody: motion.tbody,
} as const;

export function StaggerList({
  children,
  staggerDelay = 0.03,
  className,
  as = "div",
}: StaggerListProps) {
  const Component = MotionComponents[as];

  return (
    <Component
      className={className}
      initial="hidden"
      animate="visible"
      variants={containerVariants(staggerDelay)}
    >
      {children}
    </Component>
  );
}

/* ------------------------------------------------------------------ */
/*  StaggerItem                                                       */
/* ------------------------------------------------------------------ */

interface StaggerItemProps {
  children: ReactNode;
  className?: string;
}

const itemVariants: Variants = {
  hidden: {
    opacity: 0,
    y: 8,
  },
  visible: {
    opacity: 1,
    y: 0,
    transition: {
      duration: 0.25,
      ease: [0.25, 0.1, 0.25, 1],
    },
  },
};

export function StaggerItem({ children, className }: StaggerItemProps) {
  return (
    <motion.div className={className} variants={itemVariants}>
      {children}
    </motion.div>
  );
}
