<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 mt-10 font-semibold leading-tight tracking-normal first:mt-0"
    :class="{
      'text-5xl': level === 1,
      'text-4xl': level === 2,
      'text-3xl': level === 3,
      'text-2xl': level === 4,
      'text-xl': level === 5,
      'text-lg': level === 6
    }"
  >
    <slot />
  </component>
</template>
