<template>
  <component :is="tag" class="cpText" :class="dynamicClasses" v-bind="$attrs">
    <slot />
  </component>
</template>

<script setup lang="ts">
import { computed } from 'vue'

import { capitalizeFirstLetter } from '@/helpers'

export type CpTextSize =
  | 'xs'
  | 'sm'
  | 'md'
  | 'lg'
  | 'xl'
  | '2xl'
  | '3xl'
  | '4xl'
  | '5xl'
  | '6xl'
  | '7xl'
  | '8xl'
  | '9xl'

export type CpTextWeight = 400 | 500 | 600 | 700

interface Props {
  size?: CpTextSize
  tag?: string
  weight?: CpTextWeight
}

const props = withDefaults(defineProps<Props>(), {
  size: 'md',
  tag: 'p',
  weight: 400,
})

const weightList = {
  400: 'normal',
  500: 'medium',
  600: 'semibold',
  700: 'bold',
}

const dynamicClasses = computed(() => [
  `cpText--${props.size}`,
  `cpText--is${capitalizeFirstLetter(weightList[props.weight])}`,
])

defineOptions({
  inheritAttrs: false,
})
</script>

<style lang="scss">
.cpText {
  &--xs {
    font-size: var(--cp-text-size-xs);
    line-height: var(--cp-line-height-xs);
  }

  &--sm {
    font-size: var(--cp-text-size-sm);
    line-height: var(--cp-line-height-sm);
  }

  &--md {
    font-size: var(--cp-text-size-md);
    line-height: var(--cp-line-height-md);
  }

  &--lg {
    font-size: var(--cp-text-size-lg);
    line-height: var(--cp-line-height-lg);
  }

  &--xl {
    font-size: var(--cp-text-size-xl);
    line-height: var(--cp-line-height-xl);
  }

  &--2xl {
    font-size: var(--cp-text-size-2xl);
    line-height: var(--cp-line-height-2xl);
  }

  &--3xl {
    font-size: var(--cp-text-size-3xl);
    line-height: var(--cp-line-height-3xl);
  }

  &--4xl {
    font-size: var(--cp-text-size-4xl);
    line-height: var(--cp-line-height-4xl);
  }

  &--5xl {
    font-size: var(--cp-text-size-5xl);
    line-height: var(--cp-line-height-5xl);
  }

  &--6xl {
    font-size: var(--cp-text-size-6xl);
    line-height: var(--cp-line-height-6xl);
  }

  &--7xl {
    font-size: var(--cp-text-size-7xl);
    line-height: var(--cp-line-height-7xl);
  }

  &--8xl {
    font-size: var(--cp-text-size-8xl);
    line-height: var(--cp-line-height-8xl);
  }

  &--9xl {
    font-size: var(--cp-text-size-9xl);
    line-height: var(--cp-line-height-9xl);
  }

  &--isNormal {
    font-weight: 400;
  }

  &--isMedium {
    font-weight: 500;
  }

  &--isSemibold {
    font-weight: 600;
  }

  &--isBold {
    font-weight: 700;
  }
}
</style>
