StarsContainer.tsx

import React, { useEffect, useState } from 'react'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import starIcon from 'assets/icons/visu/challenge/star.svg'
import starFilled from 'assets/icons/visu/challenge/starFilled.svg'

interface StarsContainerProps {
  result: number
  isQuizBegin?: boolean
}

const StarsContainer: React.FC<StarsContainerProps> = ({
  result,
  isQuizBegin,
}: StarsContainerProps) => {
  const [elements] = useState<string[]>([])

  useEffect(() => {
    const renderStars = () => {
      //To be removed when action and explorations will be done
      if (result === 5) {
        elements.splice(0, elements.length)
      }
      for (let i = 0; i < 5; i++) {
        if (i < result) elements.push(starFilled)
        else if (i >= result) elements.push(starIcon)
      }
    }
    renderStars()
  }, [result, elements])

  return (
    <div className="stars">
      {elements.map((star, i) => {
        return (
          <StyledIcon
            key={i}
            className="star"
            icon={star}
            size={isQuizBegin ? 25 : 15}
          />
        )
      })}
    </div>
  )
}

export default StarsContainer