import React from 'react';
import { EmptyState, TextButton } from '@wix/design-system';
import { observer } from 'mobx-react-lite';
import { Refresh } from '@wix/wix-ui-icons-common';
import { CustomFieldsWidgetState } from '../../state';
import { CustomFieldsViewWidgetState } from '@wix/bex-core';

interface ErrorStateProps {
  state: CustomFieldsWidgetState | CustomFieldsViewWidgetState;
}

const _ErrorStateContent = ({ state }: ErrorStateProps) => {
  const {
    container: { translate: t },
  } = state;

  return (
    <EmptyState
      dataHook="error-state"
      theme="page-no-border"
      title={t('cairo.customFields.technical.error.title')}
      subtitle={t('cairo.technical.error.text')}
    >
      <TextButton
        dataHook="retry-button"
        prefixIcon={<Refresh />}
        onClick={() => state.retry()}
      >
        {t('cairo.error.tryAgain.cta')}
      </TextButton>
    </EmptyState>
  );
};

export const ErrorStateContent = observer(_ErrorStateContent);