<script>
  let { options = [], value = $bindable(""), size = "default" } = $props();
</script>

<div class="inline-flex bg-bg-elevated rounded-[10px] p-[3px] gap-[2px]">
  {#each options as option}
    <button
      class="rounded-lg font-medium
        {size === 'small' ? 'px-2.5 py-1 text-[12px]' : 'px-3.5 py-[6px] text-[12px]'}
        {value === option
          ? 'bg-accent text-bg shadow-[var(--shadow-accent-pill)]'
          : 'text-text-secondary hover:text-text hover:bg-hover'}"
      style="transition-duration: var(--duration-ui)"
      onclick={() => value = option}
    >
      {option}
    </button>
  {/each}
</div>
