<script lang="ts">
  // v0.2 Phase 5 primitive — Lumotia-tinted Bits UI Tabs.
  // High-level API: `value` (bindable), `tabs` (list of {value, label})
  // and a `panel` snippet rendered per-tab. Consumers can also drop to
  // the explicit <Tabs.Content> form if they need different markup per
  // tab — re-exported below.
  import { Tabs } from "bits-ui";
  import type { Snippet } from "svelte";

  type Tab = { value: string; label: string; disabled?: boolean };

  interface Props {
    value: string;
    tabs: Tab[];
    onValueChange?: (value: string) => void;
    panel?: Snippet<[{ value: string }]>;
    listClass?: string;
  }

  let {
    value = $bindable(""),
    tabs,
    onValueChange,
    panel,
    listClass = "",
  }: Props = $props();
</script>

<Tabs.Root bind:value onValueChange={onValueChange}>
  <Tabs.List
    class="lumotia-tabs-list inline-flex bg-bg-elevated rounded-[10px] p-[3px] gap-[2px] {listClass}"
  >
    {#each tabs as tab (tab.value)}
      <Tabs.Trigger
        value={tab.value}
        disabled={tab.disabled}
        class="rounded-lg px-3.5 py-[6px] text-[12px] font-medium text-text-secondary
          hover:text-text hover:bg-hover
          data-[state=active]:bg-accent data-[state=active]:btn-filled-text data-[state=active]:shadow-[var(--shadow-accent-pill)]
          data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed
          transition-colors"
        style="transition-duration: var(--duration-ui)"
      >
        {tab.label}
      </Tabs.Trigger>
    {/each}
  </Tabs.List>
  {#each tabs as tab (tab.value)}
    <Tabs.Content value={tab.value}>
      {#if panel}{@render panel({ value: tab.value })}{/if}
    </Tabs.Content>
  {/each}
</Tabs.Root>
