<script setup lang="ts">
import { computed, provide, type Slot } from 'vue'
import type { FdsTabsProps } from './types'

const props = withDefaults(defineProps<FdsTabsProps>(), {
  block: false,
  variant: 'primary',
  dataTestid: undefined,
})

const tabsClasses = computed(() => [
  'inline-flex overflow-auto max-w-full p-0.5 gap-0.5',
  {
    'flex justify-between w-full': props.block,
    'bg-blue_t-100 rounded-[10px] mb-8': props.variant === 'primary',
    'gap-2 mb-4': props.variant === 'secondary',
  },
])

const rootAttrs = computed(() => {
  const attrs: Record<string, string> = {}
  if (props.dataTestid) {
    attrs['data-testid'] = props.dataTestid
  }
  return attrs
})

provide('tabsVariant', props.variant)
provide('tabsBlock', props.block)

defineSlots<{
  default?: Slot
}>()
</script>

<template>
  <div :class="tabsClasses" v-bind="rootAttrs">
    <slot />
  </div>
</template>
