"use client";

import { motion, type Variants } from "framer-motion";
import { cn } from "@/lib/utils";

const variants: Variants = {
  hidden: { opacity: 0, y: 12 },
  visible: { opacity: 1, y: 0 },
};

// Animates once on mount rather than on scroll-into-view. Scroll-triggered
// (whileInView) animations depend on IntersectionObserver timing, which is
// fragile for content far down a long page (slow devices, reduced-motion,
// some crawlers/screenshot tools) and can leave sections stuck at
// opacity: 0 if the observer never fires. A single subtle entrance on load
// is simpler, safer, and still avoids the "instant, no-animation" jump.
export function FadeIn({
  children,
  className,
  delay = 0,
  as = "div",
}: {
  children: React.ReactNode;
  className?: string;
  delay?: number;
  as?: "div" | "li";
}) {
  const MotionTag = as === "li" ? motion.li : motion.div;
  return (
    <MotionTag
      className={cn(className)}
      initial="hidden"
      animate="visible"
      variants={variants}
      transition={{ duration: 0.5, delay, ease: "easeOut" }}
    >
      {children}
    </MotionTag>
  );
}