<script lang="ts">
  import * as Tabs from '$lib/components/ui/tabs'

  let {
    value = $bindable(''),
    tabs,
    class: className,
    children
  }: {
    value?: string
    tabs: {
      value: string
      label: string
      count?: number
      variant?: 'destructive' | 'default' | 'secondary' | 'outline'
    }[]
    class?: string
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    children?: any
  } = $props()
</script>

<Tabs.Root
  bind:value
  class={['flex flex-1 flex-col overflow-hidden', className].filter(Boolean).join(' ')}
>
  <Tabs.List>
    {#each tabs as tab}
      <Tabs.Trigger value={tab.value}>
        {tab.label}
        {#if tab.count != null && tab.count > 0}
          <slot name="badge-{tab.value}">
            <!-- slot for custom badge rendering -->
          </slot>
        {/if}
      </Tabs.Trigger>
    {/each}
  </Tabs.List>
  {#if children}
    {@render children()}
  {/if}
</Tabs.Root>
