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

defineOptions({
  inheritAttrs: false,
})

const props = withDefaults(defineProps<FdsH3Props>(), {
  size: 'responsive',
  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
})

const headingClasses = computed(() => {
  const baseClasses = 'font-raleway leading-tight m-0 mt-4 mb-2'
  const sizeClass = getResponsiveSize(props.size)
  return [baseClasses, sizeClass, consumerClass.value].filter(Boolean).join(' ')
})

function getResponsiveSize(size: string) {
  if (size !== 'responsive') {
    const sizeMap: Record<string, string> = {
      xl: 'text-3xl',
      lg: 'text-2xl',
      md: 'text-xl',
      sm: 'text-lg',
    }
    return sizeMap[size]
  }
  return 'text-lg sm:text-xl md:text-2xl lg:text-3xl'
}
</script>

<template>
  <h3 :class="headingClasses" v-bind="rootAttrs">
    {{ text }}
  </h3>
</template>
