<script lang="ts" generics="T extends string">
    interface Option {
        label: string;
        value: T;
    }

    let {
        options,
        value,
        onchange,
        ariaLabel,
        testid
    }: {
        options: Option[];
        value: T;
        onchange: (next: T) => void;
        ariaLabel: string;
        testid?: string;
    } = $props();
</script>

<div class="segmented" role="radiogroup" aria-label={ariaLabel} data-testid={testid}>
    {#each options as opt (opt.value)}
        <button
            type="button"
            role="radio"
            aria-checked={opt.value === value}
            class="seg"
            class:active={opt.value === value}
            onclick={() => {
                if (opt.value !== value) onchange(opt.value);
            }}
            data-testid={testid ? `${testid}-${opt.value}` : undefined}
        >
            {opt.label}
        </button>
    {/each}
</div>

<style>
    .segmented {
        display: inline-flex;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        padding: 2px;
        gap: 2px;
    }

    .seg {
        height: 32px;
        padding: 0 var(--space-3);
        border: none;
        border-radius: var(--radius-sm);
        background: transparent;
        color: var(--text-muted);
        font-size: var(--font-sm);
        font-weight: var(--weight-medium);
        cursor: pointer;
        transition:
            background var(--transition),
            color var(--transition);
    }

    .seg:hover:not(.active) {
        color: var(--text);
    }

    .seg.active {
        background: var(--surface-elevated);
        color: var(--text);
        box-shadow: var(--shadow-sm);
    }
</style>
