Stagger Grid

"use client";

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

export interface StaggerGridProps {
  children: ReactNode;
  /** Seconds between items. */
  stagger?: number;
  /** Number of columns at lg (1 on mobile, 2 at sm). */
  columns?: 2 | 3 | 4;
  className?: string;
}

const COLS = { 2: "lg:grid-cols-2", 3: "lg:grid-cols-3", 4: "lg:grid-cols-4" } as const;

/** Responsive grid whose items fade + rise in sequence (row by row, left to right) when the grid scrolls into view; a subtle scale from 0.98 keeps it crisp. */
export function StaggerGrid({ children, stagger = 0.06, columns = 3, className }: StaggerGridProps) {
  const reduce = useReducedMotion();
  return (
    <motion.ul
      className={cn("grid gap-4 sm:grid-cols-2", COLS[columns], className)}
      initial={reduce ? false : "hidden"}
      whileInView="shown"
      viewport={{ once: true, amount: 0.15 }}
      variants={{ hidden: {}, shown: { transition: { staggerChildren: stagger } } }}
    >
      {Children.toArray(children).map((c, i) => (
        <motion.li
          key={i}
          variants={{ hidden: { opacity: 0, y: 12, scale: 0.98 }, shown: { opacity: 1, y: 0, scale: 1, transition: { duration: 0.4, ease: [0.2, 0, 0, 1] } } }}
        >
          {c}
        </motion.li>
      ))}
    </motion.ul>
  );
}

export default StaggerGrid;