Message Rise

"use client";

import { Children, useEffect, useRef, useState, type ReactNode } from "react";
import { cn } from "@/lib/utils";

export interface MessageRiseProps {
  children?: ReactNode;
  /** Milliseconds between two items. */
  stagger?: number;
  /** Start when scrolled into view (default) or right after mount. */
  trigger?: "view" | "mount";
  className?: string;
}

/**
 * Entrance for chat logs and lists: each child rises 12px, un-blurs and fades in, one after another,
 * with the long Nocturne settle. Runs once when the group enters the viewport; instant with reduced motion.
 */
export function MessageRise({ children, stagger = 140, trigger = "view", className }: MessageRiseProps) {
  const ref = useRef<HTMLDivElement>(null);
  const [shown, setShown] = useState(false);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    if (trigger === "mount") {
      const raf = requestAnimationFrame(() => setShown(true));
      return () => cancelAnimationFrame(raf);
    }
    const io = new IntersectionObserver(
      ([entry]) => {
        if (entry?.isIntersecting) {
          setShown(true);
          io.disconnect();
        }
      },
      { threshold: 0.2 },
    );
    io.observe(el);
    return () => io.disconnect();
  }, [trigger]);

  return (
    <div ref={ref} className={cn("flex flex-col", className)}>
      {Children.toArray(children).map((child, i) => (
        <div
          key={i}
          style={{ transitionDelay: shown ? `${i * stagger}ms` : "0ms" }}
          className={cn(
            "transition-[opacity,translate,filter] duration-(--da-duration-slow) ease-da-emphasized motion-reduce:transition-none",
            shown ? "translate-y-0 opacity-100 blur-0" : "translate-y-3 opacity-0 blur-[2px] motion-reduce:translate-y-0 motion-reduce:opacity-100 motion-reduce:blur-0",
          )}
        >
          {child}
        </div>
      ))}
    </div>
  );
}

export default MessageRise;