import React from 'react';
import { Checkbox } from 'UI';
import cn from 'classnames';
import stl from './featureItem.module.css';

function FeatureItem({ label, completed = false, subText, onClick }) {
  return (
    <div
      className={cn(stl.wrapper, {
        [stl.activeLink]: onClick,
        [stl.completed]: completed,
      })}
      onClick={onClick && onClick}
    >
      <Checkbox
        label={label}
        className={cn(stl.checkbox, completed ? stl.active : '')}
        name="strict"
        checked={completed}
        readOnly
      />
      {subText && <div className={stl.subText}>{subText}</div>}
    </div>
  );
}

export default FeatureItem;