import classnames from 'classnames' ; import { isNumber , isUndefined } from 'lodash' ; import { FaStar } from 'react-icons/fa' ; import prettifyNumber from '../../utils/prettifyNumber' ; import styles from './StarBadge.module.css' ; interface Props { starsNumber ? : number | any ; className ? : string ; size ? : 'xs' | 'sm' ; } const StarBadge = ( props ) => { if ( isUndefined ( props . starsNumber ) || ! isNumber ( props . starsNumber ) ) return null ; return ( < div data - testid = "starBadge" className = { classnames ( 'badge rounded-pill bg-light text-dark border' , styles . badge , props . className , { [ styles [ `size-${ props . size }` ] ] : ! isUndefined ( props . size ) , } ) } aria - label = { `${ props . starsNumber } stars` } > < div className = "d-flex align-items-center" > < FaStar className = { `me-1 ${ styles . icon }` } /> < div > { prettifyNumber ( props . starsNumber ) } < /div> < /div> < /div>); } ; export default StarBadge ;