import { Text } from '@wix/design-system';
import React from 'react';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { CustomActionModal } from '../ActionModal';
import { observer } from 'mobx-react-lite';
import { ArchiveFieldModalState } from '@wix/bex-core';

export const _ArchiveFieldModal = ({
  state,
}: {
  state: ArchiveFieldModalState;
}) => {
  const container = useWixPatternsContainer();
  const { translate: t } = container;

  return (
    <CustomActionModal
      dataHook="archive-custom-field-modal"
      state={state.modal}
      title={t('cairo.customFields.archive.modal.title')}
      primaryButtonText={t('cairo.customFields.archive.modal.CTA')}
      secondaryButtonText={t('cairo.customFields.archive.modal.cancel.CTA')}
      content={
        <Text dataHook="archive-custom-field-body">
          {t('cairo.customFields.archive.modal.description')}
        </Text>
      }
      theme="destructive"
      width="510px"
    />
  );
};

export const ArchiveFieldModal = observer(_ArchiveFieldModal);
