"use client";

import { motion } from "framer-motion";
import type { ReactNode } from "react";
import { fadeUp, staggerContainer, viewport } from "@/lib/animations";
import type { Variants } from "framer-motion";

const VARIANTS: Record<string, Variants> = {
  fadeUp,
  stagger: staggerContainer,
};

type AnimatedSectionProps = {
  children: ReactNode;
  className?: string;
  variant?: "fadeUp" | "stagger";
  delay?: number;
};

export function AnimatedSection({
  children,
  className = "",
  variant = "fadeUp",
  delay = 0,
}: AnimatedSectionProps) {
  const chosen = VARIANTS[variant] ?? fadeUp;
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const withDelay: Variants = {
    hidden: chosen.hidden as any,
    visible: {
      ...(chosen.visible as any),
      transition: {
        ...((chosen.visible as any)?.transition ?? {}),
        delay,
      },
    },
  };

  return (
    <motion.div
      className={className}
      variants={withDelay}
      initial="hidden"
      whileInView="visible"
      viewport={viewport}
    >
      {children}
    </motion.div>
  );
}
