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

defineOptions({
  inheritAttrs: false,
})

const props = withDefaults(defineProps<FdsH1Props>(), {
  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 mb-3'
  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-6xl',
      lg: 'text-5xl',
      md: 'text-4xl',
      sm: 'text-2xl',
    }
    return sizeMap[size]
  }
  return 'text-2xl sm:text-4xl md:text-5xl lg:text-6xl'
}
</script>

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