"use client";

import React from "react";
import { motion } from "motion/react";
import type { Variants } from "motion/react";
import { staggerContainer } from "@/lib/animation";

type StaggerProps = {
  className?: string;
  children: React.ReactNode;
  stagger?: number;
  delayChildren?: number;
  once?: boolean;
};

export function Stagger({
  className,
  children,
  stagger = 0.08,
  delayChildren = 0,
  once = true,
}: StaggerProps) {
  const variants: Variants = staggerContainer(stagger, delayChildren);
  return (
    <motion.div
      className={className}
      initial="initial"
      whileInView="animate"
      viewport={{ once, margin: "0px 0px -10% 0px" }}
      variants={variants}
    >
      {children}
    </motion.div>
  );
}