import styles from "./styles.module.scss";

interface IStarsProps {
  containerClassName?: string;
  color?: string;
}

function Stars({
  color = "rgb(250, 175, 0)",
  containerClassName = "",
}: IStarsProps) {
  return (
    <span
      className={`${styles.stars} ${containerClassName}`}
      role="img"
      aria-label="5 Stars"
      style={{ color }}
    >
      <span>
        <span className={styles.star}>
          <svg
            focusable="false"
            aria-hidden="true"
            viewBox="0 0 24 24"
            data-testid="StarIcon"
          >
            <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path>
          </svg>
        </span>
      </span>
      <span>
        <span className={styles.star}>
          <svg
            focusable="false"
            aria-hidden="true"
            viewBox="0 0 24 24"
            data-testid="StarIcon"
          >
            <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path>
          </svg>
        </span>
      </span>
      <span>
        <span className={styles.star}>
          <svg
            focusable="false"
            aria-hidden="true"
            viewBox="0 0 24 24"
            data-testid="StarIcon"
          >
            <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path>
          </svg>
        </span>
      </span>
      <span>
        <span className={styles.star}>
          <svg
            focusable="false"
            aria-hidden="true"
            viewBox="0 0 24 24"
            data-testid="StarIcon"
          >
            <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path>
          </svg>
        </span>
      </span>
      <span>
        <span className={styles.star}>
          <svg
            focusable="false"
            aria-hidden="true"
            viewBox="0 0 24 24"
            data-testid="StarIcon"
          >
            <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path>
          </svg>
        </span>
      </span>
    </span>
  );
}

export default Stars;
