<script setup lang="ts">
import { Tabs as ShadcnTabs } from '@/components/core/tabs';
import type { UiTabsProps, UiTabsEmits } from './types';

defineOptions({
  name: 'UiTabs',
});

const props = defineProps<UiTabsProps>();

const emit = defineEmits<UiTabsEmits>();

// reka-ui emits string | number, but our public API only exposes string.
// Defensive coercion ensures compatibility if the underlying library emits a number.
function handleModelValueUpdate(value: string | number) {
  emit('update:modelValue', String(value));
}
</script>

<template>
  <ShadcnTabs
    :model-value="props.modelValue"
    :default-value="props.defaultValue"
    :orientation="props.orientation"
    :dir="props.dir"
    :activation-mode="props.activationMode"
    @update:model-value="handleModelValueUpdate"
  >
    <slot />
  </ShadcnTabs>
</template>
