<template>
  <component
    :is="as"
    :class="[
      'ds-heading',
      `ds-heading--${font}`,
      `ds-heading--${resolvedsize}`,
      `ds-heading--${resolvedWeight}`,
      `ds-heading--${resolvedspacing}`, //margin-bottom
      `ds-heading--${tone}`
    ]"
  >
    <slot />
  </component>
</template>

<script setup>
  import { computed } from 'vue'

  const props = defineProps({
    as: { type: String, default: 'h2' },               // h1/h2/h3/p/span...
    font: { type: String, default: 'roboto' },        // barlow | brandon
    tone: { type: String, default: 'default' },        // default/muted/invert
  })

  const resolvedWeight = computed(() => {
    switch (props.as) {
      case 'h1':
        return 'extrabold'
      case 'h2':
        return 'bold'
      case 'h3':
        return 'semibold'
      case 'h4':
        return 'black'
      case 'h5':
        return 'medium'
      case 'h6':
        return 'extralight'
      default:
        return 'semibold'
    }
  })

  const resolvedsize = computed(() => {
    switch (props.as) {
      case 'h1':
        return '2xl'
      case 'h2':
        return 'xl'
      case 'h3':
        return 'lg'
      case 'h4':
        return 'lg2'
      case 'h5':
        return 'md2'
      case 'h6':
        return 'xs2'
      default:
        return 'semibold'
    }
  })

  // Margin-bottom
  const resolvedspacing = computed(() => {
    switch (props.as) {
      case 'h1':
        return 'space-6'
      case 'h2':
        return 'space-6'
      case 'h3':
        return 'space-6'
      case 'h4':
        return 'space-6'
      case 'h5':
        return 'space-6'
      case 'h6':
        return 'space-6'
      default:
        return 'space-6'
    }
  })

</script>

<style lang="scss">
  .ds-heading {
    &--roboto { font-family: var(--font-roboto); }
    &--barlow { font-family: var(--font-barlow); }
    &--brandon { font-family: var(--font-brandon); }
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    margin: 0;
    font-optical-sizing: auto; /* laisser le navigateur gérer opsz */
    font-variation-settings: "opsz" var(--opsz-title); /* optionnel pour le forcer */

    &--xs { font-size: var(--title-xs); }
    &--xs2 { font-size: var(--title-xs2); }
    &--sm { font-size: var(--title-sm); }
    &--md { font-size: var(--title-md); }
    &--md2 { font-size: var(--title-md2); }
    &--lg { font-size: var(--title-lg); }
    &--lg2 { font-size: var(--title-lg2); }
    &--xl { font-size: var(--title-xl); }
    &--2xl { font-size: var(--title-2xl); }

    &--extralight { font-weight: var(--fw-extralight); } 
    &--light { font-weight: var(--fw-light); } 
    &--regular { font-weight: var(--fw-regular); }  
    &--medium { font-weight: var(--fw-medium); }  
    &--semibold { font-weight: var(--fw-semibold); }
    &--bold { font-weight: var(--fw-bold); }
    &--extrabold { font-weight: var(--fw-extrabold); }
    &--black { font-weight: var(--fw-black); }

    &--space-48 { margin-bottom: var(--sp-48); }
    &--space-40 { margin-bottom: var(--sp-40); }
    &--space-32 { margin-bottom: var(--sp-32); }
    &--space-24 { margin-bottom: var(--sp-24); }
    &--space-20 { margin-bottom: var(--sp-20); }
    &--space-16 { margin-bottom: var(--sp-16); }
    &--space-6 { margin-bottom: var(--sp-6); }

    //TONE
    &--default { color: var(--c-text, #111); }
    &--muted { color: var(--c-text-muted, #555); }
    &--invert { color: var(--c-text-invert, #fff); }
    &--brand_rouge { color: var(--c-brand_rouge); }
    &--brand_rouge-weak { color: var(--c-brand_rouge-weak); }
    &--success { color: var(--c-success); }
    &--warning { color: var(--c-warning); }
    &--danger { color: var(--c-danger); }
    &--bleu_fonce { color: var(--c-bleu_fonce); }
    &--bleu_clair { color: var(--c-bleu_clair); }

    

    &--info { color: var(--c-info); }



  }
</style>