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

defineOptions({
  inheritAttrs: false,
})

const props = withDefaults(defineProps<FdsH2Props>(), {
  size: 'responsive',
  dataTestid: undefined,
})

const attrs = useAttrs()

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

const rootAttrs = computed(() => {
  // We bind `class` explicitly via `headingClasses` to control class order
  // (base classes first, consumer classes last).
  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-5xl',
      lg: 'text-4xl',
      md: 'text-3xl',
      sm: 'text-xl',
    }
    return sizeMap[size]
  }
  return 'text-xl sm:text-3xl md:text-4xl lg:text-5xl'
}
</script>

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