import React from 'react';
import { observer } from 'mobx-react-lite';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { MessageActionModal } from '../ActionModal';

function _NavigationModal() {
  const { onNavigationModal } = useWixPatternsContainer();
  const { value } = onNavigationModal;

  return (
    <MessageActionModal
      state={onNavigationModal}
      dataHook="navigation-modal"
      theme="destructive"
      {...(value && {
        title: value.title,
        content: value.content,
        onAfterClose: value.onAfterClose,
        primaryButtonOnClick: value.onConfirm,
        secondaryButtonOnClick: value.onClose,
        onCloseButtonClick: value.onClose,
        primaryButtonText: value.primaryButtonText,
        secondaryButtonText: value.secondaryButtonText,
      })}
    />
  );
}

export const NavigationModal = observer(_NavigationModal);