"use client";

import { cn } from "@/shared/utils";

interface AnimatedContainerProps {
  children: React.ReactNode;
  className?: string;
  /** Animation type */
  animation?: "fade-up" | "fade-scale" | "slide-left" | "none";
  /** Whether to stagger children animations */
  stagger?: boolean;
  /** Delay before animation starts in ms */
  delay?: number;
}

/**
 * Reusable animation wrapper component
 * Provides consistent entrance animations for page content
 */
export function AnimatedContainer({
  children,
  className,
  animation = "fade-up",
  stagger = false,
  delay = 0,
}: AnimatedContainerProps) {
  const animationClass = {
    "fade-up": "cp-animate-in",
    "fade-scale": "cp-animate-scale-in",
    "slide-left": "cp-animate-slide-left",
    none: "",
  }[animation];

  return (
    <div
      className={cn(animationClass, stagger && "cp-stagger-children", className)}
      style={delay > 0 ? { animationDelay: `${delay}ms` } : undefined}
    >
      {children}
    </div>
  );
}