interface Props {
  label: string;
  value: number;
  color?: string;
}

const SEGMENTS = 5;

export default function ScoreBar({
  label,
  value,
  color = "#ffd400",
}: Props) {
  const score = Math.max(
    0,
    Math.min(100, Number(value || 0))
  );

  const filled = Math.round(
    (score / 100) * SEGMENTS
  );

  return (
    <div className="score-item">

      <div className="score-title">
        <span>{label.toUpperCase()}</span>
      </div>

      <div className="score-track">
        {Array.from({ length: SEGMENTS }).map(
          (_, index) => (
            <span
              key={index}
              className="score-segment"
              style={
                index < filled
                  ? { background: color }
                  : undefined
              }
            />
          )
        )}
      </div>

    </div>
  );
}