<template>
  <component :is="tag" :class="headingClass">
    <slot />
  </component>
</template>

<script setup lang="ts">
const props = defineProps({
  level: {
    type: Number,
    default: 1,
  },
  weight: {
    type: String,
    default: 'bold',
  },
  tone: {
    type: String,
    default: 'default', // default | inverse | muted
  },
})

const tag = computed(() => {
  const n = Math.min(Math.max(props.level, 1), 4)
  return `h${n}`
})

const headingClass = computed(() => {
  const sizeMap: Record<number, string> = {
    1: 'text-heading',
    2: 'text-subheading',
    3: 'text-body',
    4: 'text-caption',
  }
  const sizeClass = sizeMap[Math.min(Math.max(props.level, 1), 4)]
  const weightClass = props.weight === 'semibold' ? 'font-semibold' : 'font-bold'
  const toneMap: Record<string, string> = {
    default: 'text-neutral-text',
    inverse: 'text-white',
    muted: 'text-neutral-text/80',
  }
  const toneClass = toneMap[props.tone] || toneMap.default
  return ['font-heading', sizeClass, weightClass, toneClass].join(' ')
})
</script>
