<script lang="ts" module>
  import { tv, type VariantProps } from 'tailwind-variants'

  export const tabsListVariants = tv({
    base: 'rounded-lg p-[3px] group-data-horizontal/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col',
    variants: {
      variant: {
        default: 'cn-tabs-list-variant-default bg-muted',
        line: 'cn-tabs-list-variant-line gap-1 bg-transparent'
      }
    },
    defaultVariants: {
      variant: 'default'
    }
  })

  export type TabsListVariant = VariantProps<typeof tabsListVariants>['variant']
</script>

<script lang="ts">
  import { Tabs as TabsPrimitive } from 'bits-ui'
  import { cn } from '$lib/utils.js'

  let {
    ref = $bindable(null),
    variant = 'default',
    class: className,
    ...restProps
  }: TabsPrimitive.ListProps & {
    variant?: TabsListVariant
  } = $props()
</script>

<TabsPrimitive.List
  bind:ref
  data-slot="tabs-list"
  data-variant={variant}
  class={cn(tabsListVariants({ variant }), className)}
  {...restProps}
/>
