---
interface Props {
  score?: number;
  size?: "md" | "lg";
  showNumber?: boolean;
}
// score is optioneel voor een nog-niet-gepubliceerd concept (draft: true) —
// dan tonen we gewoon 0/5 in plaats van te crashen.
const { score = 0, size = "md", showNumber = true } = Astro.props;
const cells = Array.from({ length: 5 }, (_, i) => i < score);
---

<span class={`robots ${size === "lg" ? "lg" : ""}`} aria-label={`${score} van de 5 robots`}>
  {
    cells.map((filled) => (
      <svg class={filled ? "robot-fill" : "robot-off"} aria-hidden="true">
        <use href="#robot-icon" />
      </svg>
    ))
  }
  {showNumber && <span class="score-num tabnum">{score}/5</span>}
</span>

<style>
  .robots {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    vertical-align: middle;
  }
  .robots svg { width: 17px; height: 17px; display: block; }
  .robots.lg svg { width: 24px; height: 24px; }
  .robot-fill { fill: var(--accent); }
  .robot-off { fill: var(--robot-off); }
  .score-num {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--muted);
    margin-left: 4px;
  }
</style>
