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

export const FormerLayoutBottom = () => {
  const { buttonArea, getState, opened, renderBottom } = useFormerStore((state) => ({
    buttonArea: state.layout?.buttonArea,
    getState: state.getState,
    opened: state.opened,
    renderBottom: state.layout?.renderBottom,
  }));

  if (renderBottom) {
    return renderBottom(
      <FormerButtonArea />,
      opened,
      getState('onClose'),
      getState('onOpen'),
      getState
    );
  }

  return buttonArea === "bottom" ?  <FormerButtonArea /> : <></>;
};