<script lang="ts">
  import type { Snippet } from "svelte";
  const {
    labels = [] as string[],
    children,
  }: { labels: string[]; children: Snippet<[number]> } = $props();
  let active = $state(0);

  function select(index: number) {
    active = index;
  }
</script>

<div class="tabs">
  {#each labels as label, i}
    <button class:selected={i === active} onclick={() => select(i)}>
      {label}
    </button>
  {/each}
</div>

{#if labels.length > 0}
  {@render children(active)}
{/if}

<style>
  .tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }

  .tabs button {
    flex: 1;
    background: var(--surface-alt-color);
    color: var(--text-color);
    border: 2px solid var(--accent-color);
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.8rem;
    padding: 0.4rem 0.2rem;
    cursor: pointer;
    transition: background 0.2s;
  }

  .tabs button.selected {
    background: var(--accent-color);
    color: var(--surface-color);
  }
</style>
