<template>
  <div class="flex items-center gap-1" :title="tooltip">
    <UIcon
      v-for="(star, i) in stars"
      :key="i"
      name="i-heroicons-star-20-solid"
      class="w-4 h-4"
      :class="star ? 'text-amber-400' : 'text-gray-200'"
    />
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  enrollment: boolean;
  sideload: boolean;
  app: boolean;
}>();

const stars = computed(() => [props.enrollment, props.sideload, props.app]);
const tooltip = computed(() => {
  const labels = ["Enrollment", "Sideload", "ReBreak App"];
  return stars.value.map((ok, i) => `${labels[i]}: ${ok ? "✓" : "✗"}`).join(" · ");
});
</script>
