"use client";

import { motion, type Variants } from "motion/react";
import { Children, type ReactNode } from "react";
import { cn } from "@/lib/utils";

type StaggerListProps = {
  children: ReactNode;
  className?: string;
  itemClassName?: string;
  stagger?: number;
  delay?: number;
  distance?: number;
  once?: boolean;
};

const container = (stagger: number, delay: number): Variants => ({
  hidden: {},
  show: {
    transition: { staggerChildren: stagger, delayChildren: delay },
  },
});

const item = (distance: number): Variants => ({
  hidden: { opacity: 0, y: distance, filter: "blur(6px)" },
  show: {
    opacity: 1,
    y: 0,
    filter: "blur(0px)",
    transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] },
  },
});

export function StaggerList({
  children,
  className,
  itemClassName,
  stagger = 0.1,
  delay = 0,
  distance = 24,
  once = true,
}: StaggerListProps) {
  const items = Children.toArray(children);
  return (
    <motion.div
      className={cn(className)}
      variants={container(stagger, delay)}
      initial="hidden"
      whileInView="show"
      viewport={{ once, amount: 0.2 }}
    >
      {items.map((child, index) => (
        <motion.div key={index} variants={item(distance)} className={cn(itemClassName)}>
          {child}
        </motion.div>
      ))}
    </motion.div>
  );
}