<template>
  <component
    :is="as"
    class="text-primary"
    :class="[
      {
        'text-2xl lg:text-3xl 2xl:text-4xl': size === '600',
      }, // 24px
      {
        'text-xl lg:text-2xl 2xl:text-3xl': size === '500',
      }, // 20px
      {
        'text-lg lg:text-xl 2xl:text-2xl': size === '400',
      }, // 18px
      {
        'text-lg lg:text-[20px]': size === '300',
      }, // 16px
      {
        'text-sm': size === '200',
      }, // 14px
    ]"
  >
    <slot />
  </component>
</template>

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

const props = defineProps({
  as: {
    type: String,
    default: 'p',
  },
  /**
   * Tailwind text size from 600 to 200
   */
  size: {
    type: String,
    default: '300',
  },
})

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