import clsx from "clsx";

import { Icon, IconName } from "..";

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

interface StarsProps {
  rating?: number;
  size?: number;
  className?: string;
}

export default function Stars({ rating = 5, size = 9, className }: StarsProps) {
  const total = 5;

  const fills = Array.from({ length: total }).map((_, i) => {
    const diff = rating - i;
    return Math.max(Math.min(diff, 1), 0) * 100;
  });

  return (
    <div className={clsx(styles.stars, className)}>
      {fills.map((fill, i) => (
        <span
          key={`star-${i}`}
          className={styles.star}
          style={{ width: size, height: size }}
        >
          <Icon
            name={IconName.Star}
            size={{ width: size, height: size }}
            color="#E5E7EB"
            cursor="auto"
          />

          {fill > 0 && (
            <span className={styles.starFill} style={{ width: `${fill}%` }}>
              <Icon
                name={IconName.Star}
                size={{ width: size, height: size }}
                color="#FFD600"
                cursor="auto"
              />
            </span>
          )}
        </span>
      ))}
    </div>
  );
}
