<script lang="ts">
  export type Option = { label: string; value: string };
  export let name: string;
  export let options: Option[] = [];
  export let value: string;
</script>

<div class="segmented" role="radiogroup" aria-label={name}>
  {#each options as opt}
    <label class={`item ${value === opt.value ? 'active' : ''}`}>
      <input type="radio" {name} value={opt.value} bind:group={value} />
      <span>{opt.label}</span>
    </label>
  {/each}
</div>

<style>
  .segmented {
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-surface);
  }
  .item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-right: 1px solid var(--color-border);
    cursor: pointer;
    user-select: none;
  }
  .item:last-child { border-right: 0; }
  .item input { position: absolute; opacity: 0; pointer-events: none; }
  .item.active {
    background: rgba(37,99,235,0.12);
    color: var(--color-primary);
    font-weight: 600;
  }
  @media (prefers-color-scheme: dark) {
    .item.active { background: rgba(96,165,250,0.14); }
  }
</style>
