<script lang="ts" setup>
import { withDefaults } from "vue";
import { IProps } from "./props";

withDefaults(defineProps<IProps>(), {
  as: "span",
  weight: "normal",
  color: "gray-500",
  size: "xs"
});
</script>

<template>
  <component
    :is="as"
    :style="`
      font-size: var(--font-${size});
      font-weight: var(--weight-${weight});
      color: var(--${color});
    `"
  >
    <slot />
  </component>
</template>

<style lang="scss" scoped></style>
