<template>
  <section class="contact_spe_cont">
      <DsHeading as="h1" tone="default" textcase="uppercase">
        {{titre}}
      </DsHeading>
      <div class="confetti"></div>
      <div class="contact_spe_descripion">
          <div class="contact_spe_descripion_item contact_spe_descripion_item--nom">{{ nom }}</div>
          <div class="contact_spe_descripion_item contact_spe_descripion_item--poste">{{ poste }}</div>
          <div v-if="numero" class="contact_spe_descripion_item contact_spe_descripion_item--numero">{{ numero }}</div>
          <div v-if="mail" class="contact_spe_descripion_item contact_spe_descripion_item--numero">{{ mail }}</div>
          <div v-if="adresse" class="contact_spe_descripion_item contact_spe_descripion_item--numero">{{ adresse }}</div>
      </div>
  </section>
</template>

<script setup>
  import DsHeading from '@root/design-system/primitives/DsHeading.vue'

  defineProps({
    titre: { type: String, required: true },    
    nom: { type: String, required: true },
    poste: { type: String, required: true },
    numero: { type: String, default: '' },
    mail: { type: String, required: true },
    adresse: { type: String, default: ''}
  })
</script>

<style lang="scss">

  .contact_spe_cont {
      display: flex;
      flex-direction: column;
      align-items: center;

      @media (max-width: 599px) {
          padding-left: 10px;
          padding-right: 10px;
      }

      font-family: var(--font-roboto);

      margin-top: 30px;

      h1 {
        text-align: center;
      }

      .contact_spe_descripion {
        max-width: 370px;
        .contact_spe_descripion_item {
          padding-bottom: 10px;
          &--nom {
            font-weight: var(--fw-semibold);
          }
          &--poste {
            font-weight: var(--fw-light);
          }
        }
      }


  }
  .confetti {
    height: 20px;
    width: 50px;
    margin-top: 15px;
    margin-bottom: 30px;
    background-color: var(--c-brand_rouge);
    transform: rotate(20deg);
  }


</style>
