<script setup>
const props = defineProps({
  level: {
    type: Number,
    default: 2
  }
})

const tagName = computed(() => `h${Math.min(Math.max(props.level, 1), 6)}`)
</script>

<template>
  <component
    :is="tagName"
    class="prose-heading mb-2.5 mt-12 font-semibold leading-[1.25] tracking-normal first:mt-0"
    :class="{
      'text-[clamp(1.35rem,1.25rem+0.35vw,1.6rem)] leading-[1.15]': level === 1,
      'text-[clamp(1.2rem,1.15rem+0.3vw,1.4rem)]': level === 2,
      'text-[clamp(1.1rem,1.05rem+0.25vw,1.25rem)]': level === 3,
      'text-[clamp(1.025rem,1rem+0.2vw,1.15rem)]': level === 4,
      'text-[clamp(0.95rem,0.925rem+0.15vw,1.05rem)]': level === 5,
      'text-[clamp(0.9rem,0.875rem+0.1vw,1rem)]': level === 6
    }"
  >
    <slot />
  </component>
</template>
