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

  interface Props {
    options: Option[];
    selected: string;
    onSelect: (value: string) => void;
    size?: 'sm' | 'md';
  }

  let { options, selected, onSelect, size = 'sm' }: Props = $props();
</script>

<div class="seg" class:seg-md={size === 'md'} role="radiogroup">
  {#each options as opt}
    <button
      class="seg-btn"
      class:active={selected === opt.value}
      role="radio"
      aria-checked={selected === opt.value}
      onclick={() => onSelect(opt.value)}
    >
      {opt.label}
    </button>
  {/each}
</div>

<style>
  .seg {
    display: flex;
    border-radius: 0.25rem;
    overflow: hidden;
    border: 1px solid var(--ctp-surface1);
  }

  .seg-btn {
    flex: 1;
    padding: 0.25rem 0.5rem;
    background: var(--ctp-surface0);
    border: none;
    color: var(--ctp-overlay1);
    font-size: 0.75rem;
    cursor: pointer;
    font-family: var(--ui-font-family);
    white-space: nowrap;
    transition: background 0.12s, color 0.12s;
  }

  .seg-btn:not(:last-child) {
    border-right: 1px solid var(--ctp-surface1);
  }

  .seg-btn:hover {
    background: var(--ctp-surface1);
    color: var(--ctp-subtext1);
  }

  .seg-btn.active {
    background: color-mix(in srgb, var(--ctp-blue) 20%, var(--ctp-surface0));
    color: var(--ctp-blue);
    font-weight: 600;
  }

  .seg-md .seg-btn {
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
  }
</style>
