import type { ReactNode } from "react";
import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
import { cn } from "#/utils/utils";

const ACCORDION_TRANSITION = {
  duration: 0.2,
  ease: "easeInOut" as const,
};

interface AccordionPanelProps {
  open: boolean;
  children: ReactNode;
  testId?: string;
  className?: string;
}

/**
 * Height/opacity expand-collapse wrapper for Diffs / Commits accordion rows.
 * Honors prefers-reduced-motion by skipping animation.
 */
export function AccordionPanel({
  open,
  children,
  testId,
  className,
}: AccordionPanelProps) {
  const reduceMotion = useReducedMotion();

  if (reduceMotion) {
    return open ? (
      <div data-testid={testId} className={className}>
        {children}
      </div>
    ) : null;
  }

  return (
    <AnimatePresence initial={false}>
      {open ? (
        <motion.div
          key="accordion-panel"
          data-testid={testId}
          initial={{ height: 0, opacity: 0 }}
          animate={{ height: "auto", opacity: 1 }}
          exit={{ height: 0, opacity: 0 }}
          transition={ACCORDION_TRANSITION}
          className={cn("overflow-hidden", className)}
        >
          {children}
        </motion.div>
      ) : null}
    </AnimatePresence>
  );
}