<script lang="ts">
  import { RatingGroup, useRatingGroup } from '@ark-ui/svelte/rating-group'
  import { StarIcon } from 'lucide-svelte'
  import styles from 'styles/rating-group.module.css'

  const id = $props.id()
  const ratingGroup = useRatingGroup({ id, defaultValue: 3 })
</script>

<div class="stack">
  <output>value: {ratingGroup().value}</output>
  <RatingGroup.RootProvider class={styles.Root} value={ratingGroup}>
    <RatingGroup.Label class={styles.Label}>Label</RatingGroup.Label>
    <RatingGroup.Control class={styles.Control}>
      <RatingGroup.Context>
        {#snippet render(context)}
          {#each context().items as item}
            <RatingGroup.Item class={styles.Item} index={item}>
              <RatingGroup.ItemContext>
                {#snippet render(itemState)}
                  <span class={styles.ItemIndicator} data-highlighted={itemState().highlighted ? '' : undefined}>
                    <StarIcon data-bg="" />
                    <StarIcon data-fg="" fill="currentColor" />
                  </span>
                {/snippet}
              </RatingGroup.ItemContext>
            </RatingGroup.Item>
          {/each}
        {/snippet}
      </RatingGroup.Context>
      <RatingGroup.HiddenInput />
    </RatingGroup.Control>
  </RatingGroup.RootProvider>
</div>
