<script>
  export let value = 0;
  export let name = '';
  export let size = 'base'; // 'base', 'lg', 'xl'

  let sizeClass = {
    base: 'text-2xl',
    lg: 'text-3xl',
    xl: 'text-4xl'
  }[size] || 'text-2xl';
</script>

<div class="flex items-center gap-1">
  {#each Array(5) as _, i}
    <button
      type="button"
      class={`focus:outline-none ${sizeClass}`}
      on:click={() => value = i + 1}
      aria-label="{name} {i + 1} stars"
    >
      <span class={i < value ? 'text-yellow-400' : 'text-gray-300'}>★</span>
    </button>
  {/each}
</div>
