import React from 'react';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { MessageActionModal } from '../ActionModal';
import { ReorderModeState } from '../DragAndDrop/ReorderModeState';
import { FiltersMap } from '@wix/bex-core';

export function ReorderModeDiscardChangesModal<T, F extends FiltersMap>(props: {
  state: ReorderModeState<T, F>;
}) {
  const { translate: t } = useWixPatternsContainer();

  return (
    <MessageActionModal
      dataHook="reorder-mode-discard-changes-modal"
      state={props.state.discardChangesModal}
      title={t('cairo.dragAndDrop.reorderMode.discardChanges.title')}
      content={t('cairo.dragAndDrop.reorderMode.discardChanges.description')}
      primaryButtonText={t(
        'cairo.dragAndDrop.reorderMode.discardChanges.applyAndClose.CTA',
      )}
      secondaryButtonText={t(
        'cairo.dragAndDrop.reorderMode.discardChanges.cancel.CTA',
      )}
    />
  );
}