<script setup lang="ts">
import { computed, useAttrs, type Slot } from 'vue'
import type { FdsLeadProps } from './types'
import { classValueToString } from '../../../helpers/classValueToString'

defineOptions({
  inheritAttrs: false,
})

const props = withDefaults(defineProps<FdsLeadProps>(), {
  dataTestid: undefined,
})

const attrs = useAttrs()

const consumerClass = computed(() => classValueToString(attrs.class))

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

defineSlots<{
  default?: Slot
}>()

const spanClasses = computed(() => {
  const baseClasses = 'inline-block font-light text-lg'
  return [baseClasses, consumerClass.value].filter(Boolean).join(' ')
})
</script>

<template>
  <span :class="spanClasses" v-bind="rootAttrs">
    <slot />
  </span>
</template>
