/**
 * @module components/Cards/Product/Rating
 */
import cx from 'classnames';
import Icon from 'components/Icon';
import Text from 'components/Text';
import styles from 'components/Cards/Product/Rating/styles.css';
/** Array of empty stars */
const itemsArray = Array.from(Array(5).keys());
export default ({ value, count, className, theme = styles }) => (<div className={cx(theme.rating, className)}>
    <div className={theme.stars}>
      {itemsArray.map((index) => (<Icon key={index} name="Star" title="Star" className={cx(theme.star, { [theme.filled]: index < value })}/>))}
    </div>
    <Text display-if={!!count} className={theme.count} mode="secondary-uppercase">
      ({count})
    </Text>
  </div>);