"use client";

import { Children, cloneElement, isValidElement, ReactNode } from "react";
import ScrollReveal from "./ScrollReveal";

interface StaggerGridProps {
  children: ReactNode;
  staggerDelay?: number;
  className?: string;
  direction?: "up" | "down" | "left" | "right" | "none";
}

/**
 * StaggerGrid - Grid items animate in sequence
 * Inspired by Lama Mama's cascading reveals
 */
export default function StaggerGrid({
  children,
  staggerDelay = 0.1,
  className = "",
  direction = "up",
}: StaggerGridProps) {
  const childrenArray = Children.toArray(children);

  return (
    <div className={className}>
      {childrenArray.map((child, index) => {
        if (isValidElement(child)) {
          return (
            <ScrollReveal
              key={index}
              delay={index * staggerDelay}
              direction={direction}
            >
              {child}
            </ScrollReveal>
          );
        }
        return child;
      })}
    </div>
  );
}