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

const props = withDefaults(defineProps<IProps>(), {
  weight: "normal",
  color: "gray-500",
  fontSize: "base",
});

const getLineHeight = computed<string>(() => {
  switch (props.fontSize) {
    case "xs":
      return "18px";
    case "sm":
      return "24px";
    default:
      return "24px";
  }
});
</script>

<template>
  <p
    :style="`
      font-size: var(--font-${fontSize});
      font-weight: var(--weight-${weight});
      color: var(--${color});
      line-height: ${getLineHeight};
    `"
  >
    <slot />
  </p>
</template>

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