import { useCallback, useEffect, useState } from 'react';

/**
 * Manages mount state for a panel/drawer that uses Slide (or similar).
 * - When `open` becomes true, we set mounted to true so content can render and animate in.
 * - Call `handleExited` from Slide's onExited to set mounted to false after the exit animation.
 * This avoids rendering the panel in the DOM until it has been opened at least once,
 * and unmounts it after the close animation finishes.
 */
export function usePanelMountState(open: boolean) {
  const [isMounted, setIsMounted] = useState(open);

  useEffect(() => {
    if (open) setIsMounted(true);
  }, [open]);

  const handleExited = useCallback(() => {
    setIsMounted(false);
  }, []);

  return [isMounted, handleExited] as const;
}
