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

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

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