<template>
  <div class="typo-text">
    <h1 v-if="textType == 'title'" :class="variant" :style="`color: ${color}; font-weight: ${weight};`" data-test="base-text">
      <slot />
    </h1>
    <h2 v-if="textType == 'heading'" :class="variant" :style="`color: ${color}; font-weight: ${weight};`" data-test="base-text">
      <slot />
    </h2>
    <p v-if="textType == 'body'" :class="variant" :style="`color: ${color}; font-weight: ${weight};`" data-test="base-text">
      <slot />
    </p>
    <label v-if="textType == 'caption'" :class="variant" :style="`color: ${color}; font-weight: ${weight};`" data-test="base-text">
      <slot />
    </label>
  </div>
</template>

<script>
export default {
  props: {
    variant: {
      type: [String],
      validator: function (value) {
        return (
          [
            "title-bold",
            "title-regular",
            "heading-bold",
            "heading-regular",
            "body-1-bold",
            "body-1-regular",
            "body-2-bold",
            "body-2-regular",
            "caption-bold",
            "caption-regular",
          ].indexOf(value) !== -1
        );
      },
    },
    color: {
      type: [String],
    },
    weight: {
      type: [Number]
    }
  },
  computed: {
    textType() {
      let type = this.variant.split("-");
      return type[0];
    },
  },
};
</script>

<style scoped>
.title-bold {
  font-weight: 700;
  font-size: 24px;
  line-height: 36px;
  letter-spacing: -0.01em;
}
.title-regular {
  font-weight: 400;
  font-size: 24px;
  line-height: 36px;
  letter-spacing: -0.01em;
}
.heading-bold {
  font-weight: 700;
  font-size: 18px;
  line-height: 36px;
  letter-spacing: -0.02em;
}
.heading-regular {
  font-weight: 400;
  font-size: 18px;
  line-height: 36px;
  letter-spacing: -0.02em;
}
.body-1-bold {
  font-weight: 700;
  font-size: 14px;
  line-height: 36px;
  letter-spacing: 0em;
}
.body-1-regular {
  font-weight: 400;
  font-size: 14px;
  line-height: 36px;
  letter-spacing: 0em;
}
.body-2-bold {
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0em;
}
.body-2-regular {
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0em;
}
.caption-bold {
  font-weight: 700;
  font-size: 10px;
  line-height: 16px;
  letter-spacing: 0.02em;
}
.caption-regular {
  font-weight: 400;
  font-size: 10px;
  line-height: 16px;
  letter-spacing: 0.02em;
}
</style>
