<template>
  <span :class="`text_${type}`">
    <slot></slot>
  </span>
</template>

<script lang="ts">
import { PropType, defineComponent, toRefs } from "vue";

enum EnumType {
  H1,
  H2,
  H3,
  H4,
  H5,
  H6,
  H7
}
export type TextType = keyof typeof EnumType;

export default defineComponent({
  name: "Text",
  props: {
    type: {
      required: true,
      type: Object as PropType<TextType>,
      default: "H1"
    }
  },
  setup(props) {
    return {
      ...toRefs(props)
    };
  }
});
</script>

<style lang="css" scoped>
@import "./Text.css";
</style>
