import { useFormerStore } from './Former.store';
import { FormerButtonArea } from './FormerButtonArea';

export const FormerLayoutTop = () => {
  const { buttonOnTop, getState, opened, renderTop } = useFormerStore((state) => ({
    buttonOnTop: state.layout?.buttonOnTop,
    getState: state.getState,
    opened: state.opened,
    renderTop: state.layout?.renderTop,
  }));

  if (renderTop) {
    return renderTop(
      <FormerButtonArea />,
      opened,
      getState('onClose'),
      getState('onOpen'),
      getState
    );
  }
  return buttonOnTop ? <FormerButtonArea /> : <></>;
};