<template>
  <h3
    :class="` font-bold 
	${size == 'lg' ? 'lg:text-lg mdlg:text-lg text-base' : ''}
	${size == 'xl' ? 'lg:text-lg mdlg:text-lg text-base' : ''}
	${size == 'base' ? 'lg:text-base mdlg:text-[13px] text-sm' : ''}
	${size == 'xs' ? 'mdlg:!text-[12px] text-xs' : ''}
	${customClass}
	${color}`"
  >
    <slot />
  </h3>
</template>
<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    size: {
      type: String,
      default: "lg",
    },
    color: {
      type: String,
      default: "text-headerText",
    },
    customClass: {
      type: String,
      default: "",
    },
  },
  name: "TsHeaderText",
});
</script>
