import { ExportState, FiltersMap } from '@wix/bex-core';
import { Box, LinearProgressBar } from '@wix/design-system';
import React, { cloneElement, ReactElement } from 'react';
import { observer } from 'mobx-react-lite';

export interface ExportStepErrorProps<T, F extends FiltersMap> {
  state: ExportState<T, F>;
  children?: ReactElement;
}

function _ExportStepError<T, F extends FiltersMap>({
  state,
  children,
}: ExportStepErrorProps<T, F>) {
  const { counter } = state;

  return (
    <Box gap="SP2" direction="vertical" paddingBottom="SP1">
      <LinearProgressBar error showProgressIndication value={counter} />
      {children &&
        cloneElement(children, {
          dataHook: 'export-error-message',
        })}
    </Box>
  );
}

export const ExportStepError = observer(_ExportStepError);