"use client";

import { motion, useReducedMotion } from "framer-motion";
import type { ReactNode } from "react";
import { easeSoft } from "@/lib/motion";
import { cn } from "@/lib/cn";

/** Parent that staggers child entrances for list/grid motion. */
export function Stagger({
  children,
  className,
  delay = 0,
}: {
  children: ReactNode;
  className?: string;
  delay?: number;
}) {
  const reduceMotion = useReducedMotion();

  return (
    <motion.div
      className={cn(className)}
      initial={reduceMotion ? false : "hidden"}
      whileInView="show"
      // Low amount + positive root margin so tall mobile grids reveal (not stuck opacity:0)
      viewport={{ once: true, amount: 0.01, margin: "0px 0px -8% 0px" }}
      variants={{
        hidden: {},
        show: {
          transition: reduceMotion
            ? { duration: 0 }
            : { staggerChildren: 0.06, delayChildren: delay },
        },
      }}
    >
      {children}
    </motion.div>
  );
}

/** Child item used inside Stagger. */
export function StaggerItem({
  children,
  className,
}: {
  children: ReactNode;
  className?: string;
}) {
  const reduceMotion = useReducedMotion();

  return (
    <motion.div
      className={cn(className)}
      variants={{
        // No CSS filter blur — Android often leaves items invisible / janky
        hidden: reduceMotion
          ? { opacity: 1, y: 0 }
          : { opacity: 0, y: 16 },
        show: {
          opacity: 1,
          y: 0,
          transition: reduceMotion
            ? { duration: 0 }
            : { duration: 0.45, ease: easeSoft },
        },
      }}
    >
      {children}
    </motion.div>
  );
}