import { Box, Text } from '@wix/design-system';
import { ImportState } from '@wix/bex-core';
import React from 'react';
import { observer } from 'mobx-react-lite';

export interface ImportStepErrorProps {
  state: ImportState;
}

function _ImportStepError({ state }: ImportStepErrorProps) {
  const { importStatus, translate: t } = state;
  const errorMessage =
    importStatus.isError && importStatus.error instanceof Error
      ? importStatus.error.message
      : t('cairo.import.genericError');

  return (
    <Box direction="vertical" gap="SP2">
      <Text size="small" skin="error">
        {errorMessage}
      </Text>
    </Box>
  );
}

export const ImportStepError = observer(_ImportStepError);