<template>
  <paragraph-wrapper v-if="as == 'p'" v-bind="$props">
    <slot></slot>
  </paragraph-wrapper>
  <span-wrapper v-else-if="as == 'span'" v-bind="$props">
    <slot></slot>
  </span-wrapper>
  <typography-wrapper v-else v-bind="$props">
    <slot></slot>
  </typography-wrapper>
</template>
<script>
// import { FontType, TypographyProps } from "./types";
import { TypographyProps } from "./types";

import { ParagraphWrapper, SpanWrapper, TypographyWrapper } from "./styles";

export default {
  name: "Typography",
  props: TypographyProps,
  components: {
    "paragraph-wrapper": ParagraphWrapper,
    "span-wrapper": SpanWrapper,
    "typography-wrapper": TypographyWrapper,
  },
  data() {
    return {};
  },
  computed: {},
};
</script>
<style type="scss"></style>
