import React, { ReactElement, MouseEvent } from 'react';

import Icon from '../Icon';

import { StepIconWrapper, ActiveIcon, IncompleteIcon } from './StyledSteps';

const StepIcon = ({
  clickable,
  status,
  active,
  onClick,
}: {
  active: boolean;
  clickable: boolean;
  onClick?: (e: MouseEvent) => void;
  status: 'complete' | 'incomplete';
}): ReactElement => (
  <StepIconWrapper themeClickable={clickable} onClick={onClick}>
    {active === true && (
      <ActiveIcon themeStatus={status}>
        {status === 'complete' && <Icon icon="checkmark" />}
      </ActiveIcon>
    )}
    {status === 'complete' && active === false && (
      <Icon icon="circle-ok" size="small" />
    )}
    {status === 'incomplete' && active === false && <IncompleteIcon />}
  </StepIconWrapper>
);

export default StepIcon;