<template>
  <component
    :is="tag"
    class="font-semibold text-twilight-900"
    :class="[
      {
        'text-3xl md:text-4xl lg:text-5xl 2xl:text-6xl': size === '600',
      }, // H1
      {
        'text-3xl md:text-4xl 2xl:text-5xl': size === '500',
      }, // H2
      {
        'text-2xl md:text-3xl 2xl:text-4xl': size === '400',
      }, // H3
      {
        'text-xl lg:text-2xl 2xl:text-3xl': size === '300',
      }, // H4
      {
        'text-lg md:text-xl': size === '200',
      }, // H5
    ]"
  >
    <slot />
  </component>
</template>

<script setup lang="ts">
import { toRefs } from 'vue'

const props = defineProps({
  /**
   * Tag name: h1 to h6
   */
  tag: {
    type: String,
    default: 'h2',
  },
  /**
   * Heading size: '600' (largest) to '200' (smallest)
   */
  size: {
    type: String,
    default: '500',
  },
})

const { size, tag } = toRefs(props)
</script>
