<template>
  <component :is="$props.headingLevel" class="cpHeading" :class="`cpHeading--${size}`" v-bind="$attrs">
    <slot />
  </component>
</template>

<script setup lang="ts">
/**
 * @deprecated `CpHeading` is deprecated. Use CpText instead.
 */
interface Props {
  headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
  size?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
}

withDefaults(defineProps<Props>(), {
  headingLevel: 'h1',
  size: 500,
})

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

<style lang="scss">
.cpHeading {
  &::first-letter {
    text-transform: capitalize;
  }

  &--100 {
    font-size: var(--cp-text-size-xs);
    font-weight: 400;
    letter-spacing: var(--cp-letter-spacing-sm);
    line-height: var(--cp-line-height-xs);
  }

  &--200 {
    font-size: var(--cp-text-size-xs);
    font-weight: 600;
    line-height: var(--cp-line-height-xs);
  }

  &--300 {
    font-size: var(--cp-text-size-xs);
    font-weight: 600;
    line-height: var(--cp-line-height-xs);
  }

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

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

  &--600 {
    font-size: var(--cp-text-size-lg);
    font-weight: 500;
    letter-spacing: var(--cp-letter-spacing-md);
    line-height: var(--cp-line-height-md);
  }

  &--700 {
    font-size: var(--cp-text-size-xl);
    font-weight: 500;
    letter-spacing: var(--cp-letter-spacing-md);
    line-height: var(--cp-line-height-md);
  }

  &--800 {
    font-size: var(--cp-text-size-3xl);
    font-weight: 500;
    letter-spacing: var(--cp-letter-spacing-md);
    line-height: var(--cp-line-height-2xl);
  }

  &--900 {
    font-size: var(--cp-text-size-4xl);
    font-weight: 500;
    letter-spacing: var(--cp-letter-spacing-md);
    line-height: var(--cp-line-height-4xl);
  }
}
</style>
