import React, { ReactElement } from 'react';
import Icon from '../../Icon';
import { ValidateIconWrapper } from './StyledField';
import { Size } from './types';

type ValidateIconProps = {
  size?: Size;
  status: 'success' | 'warning' | 'error' | 'validating';
};

const ValidateIcon = ({ status, size = 'medium' }: ValidateIconProps) => {
  const renderWithWrapper = (children: ReactElement) => (
    <ValidateIconWrapper themeSize={size} data-test-id="validate-icon">
      {children}
    </ValidateIconWrapper>
  );

  switch (status) {
    case 'success':
      return renderWithWrapper(<Icon icon="circle-ok" intent="success" />);
    case 'warning':
      return renderWithWrapper(<Icon icon="circle-warning" intent="warning" />);
    case 'error':
      return renderWithWrapper(<Icon icon="circle-cancel" intent="danger" />);
    case 'validating':
      return renderWithWrapper(<Icon icon="loading" intent="success" spin />);
  }
};

export default ValidateIcon;