import React from 'react';
import classNames from 'classnames/bind';

import styles from './CreateStatus.scss';
import { ReactComponent as IconCheck } from '@assets/img/svg/ico_check_white.svg';

const cx = classNames.bind(styles);

interface IOwnProps {
  isSelected?: boolean;
  isDisabled?: boolean;
  text: string;
};

const CreateStatus: React.FC<IOwnProps> = ({
  isSelected,
  isDisabled,
  text,
}) => {
  return (
    <div className={cx('status', isSelected && 'selected', isDisabled && 'disabled')}>
      {isSelected ? (
        <IconCheck className={cx('ico_check')} />
      ) : (
        <div className={cx('text')}>{text}</div>
      )}
    </div>
  );
};

export default CreateStatus;
