import React, { FC } from 'react'
import rangeMap from '@lib/range-map'
import { Star } from '@components/icons'
import cn from 'classnames'

export interface RatingProps {
  value: number
}

const Quantity: React.FC<RatingProps> = React.memo(({ value = 5 }) => {
  return (
    <div className="flex flex-row py-6 text-accent-9">
      {rangeMap(5, (i) => (
        <span
          key={`star_${i}`}
          className={cn('inline-block ml-1 ', {
            'text-accent-5': i >= Math.floor(value),
          })}
        >
          <Star />
        </span>
      ))}
    </div>
  )
})

export default Quantity