import classnames from 'classnames' ; import { isNull , isUndefined } from 'lodash' ; import { FaCheck } from 'react-icons/fa' ; import { OPERATOR_CAPABILITIES } from '../../utils/data' ; import SmallTitle from '../common/SmallTitle' ; import styles from './CapabilityLevel.module.css' ; import CapatabilityLevelInfoModal from './CapatabilityLevelInfoModal' ; interface Props { capabilityLevel ? : string | null ; } const CapabilityLevel = ( props ) => { const activeLevel = OPERATOR_CAPABILITIES . findIndex ( ( level ) => level === ( props . capabilityLevel || '' ) . toLowerCase ( ) ) ; if ( isUndefined ( props . capabilityLevel ) || isNull ( props . capabilityLevel ) || activeLevel < 0 ) return null ; return ( < div > < div className = "d-inline" > < SmallTitle text = "Capability Level" wrapperClassName = "d-inline" / > < CapatabilityLevelInfoModal /> < /div> < div className = "mb-3 position-relative" > { OPERATOR_CAPABILITIES . map ( ( level , index ) => ( < div key = { `capabilityLevel-${ index }` } className = { `d-flex flex-row align-items-center my-2 position-relative stepWrapper ${ styles . stepWrapper }` } > < div data - testid = "capabilityLevelStep" className = { classnames ( 'rounded-circle text-center me-2 textLight step border bg-white' , styles . step , { [ `activeStep ${ styles . activeStep }` ] : activeLevel >= index , } ) } > { activeLevel >= index && < FaCheck />} < /div> < small className = { classnames ( 'text-capitalize' , { 'text-muted' : activeLevel < index , } ) } > { level } < /small> < /div>))} < /div> < /div>); } ; export default CapabilityLevel ;