import React from 'react';
import MuiCollapse from '@mui/material/Collapse';
import type { CollapseProps as MuiCollapseProps } from '@mui/material/Collapse';

// ─── Types ───────────────────────────────────────────────────────────────────

/** Props for the FA Collapse component */
export interface CollapseProps extends MuiCollapseProps {
  /** Whether the content is expanded */
  in: boolean;
  /** Content to reveal/hide */
  children: React.ReactNode;
}

// ─── Component ───────────────────────────────────────────────────────────────

/**
 * Progressive disclosure wrapper for the FA design system.
 *
 * Thin wrapper around MUI Collapse with sensible defaults for the
 * arrangement wizard's progressive disclosure pattern (fields revealed
 * after a selection is made).
 *
 * Uses a smooth slide-down animation. Unmounts children when collapsed
 * to keep the DOM clean and prevent focus on hidden fields.
 *
 * Usage:
 * ```tsx
 * <Collapse in={hasSelectedOption}>
 *   <FormField label="Next question" />
 * </Collapse>
 * ```
 */
export const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>(
  ({ children, ...props }, ref) => (
    <MuiCollapse ref={ref} unmountOnExit {...props}>
      {children}
    </MuiCollapse>
  ),
);

Collapse.displayName = 'Collapse';
export default Collapse;
