"use client";

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

interface AnimatedSectionProps {
  /** Whether to show the section */
  show: boolean;
  /** Content to animate */
  children: React.ReactNode;
  /** Delay in ms before animation starts (default: 0) */
  delay?: number;
}

/**
 * Wrapper component that provides smooth height and opacity transitions.
 * Uses CSS grid for smooth height animation.
 */
export function AnimatedSection({ show, children, delay = 0 }: AnimatedSectionProps) {
  return (
    <div
      className={cn(
        "grid transition-all duration-500 ease-out",
        show ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
      )}
      style={{ transitionDelay: show ? `${delay}ms` : "0ms" }}
    >
      <div className="overflow-hidden">{children}</div>
    </div>
  );
}
