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

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

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