import { track, trackSplit, effect, untrack, type Component } from 'ripple';

export interface FrameContentProps {
  /** Callback function to be executed when the frame is mounted */
  onMount?: () => void;
  /** Callback function to be executed when the frame is unmounted */
  onUnmount?: () => void;
  children?: Component;
}

export component FrameContent(props: FrameContentProps) {
  const [children, onMount, onUnmount] = trackSplit(props, ['children', 'onMount', 'onUnmount']);

  effect(() => {
    untrack(() => @onMount?.());
    return () => {
      untrack(() => @onUnmount?.());
    };
  });

  <@children />
}