<template>
  <div style="background-color: rgb(107, 0, 101, 1); min-height: 10vh; display: flex; flex-direction: column;">
    <v-container style="background-color: rgb(107, 0, 101, 1);">
      <v-row justify="center" style="margin-top: 30px;">
        <v-row cols="auto" class="d-flex justify-center">

          <a href="https://www.facebook.com/profile.php?id=61556819217561"><img src="../../../images/facebookicon.png"
              alt="Description image 2" style="width: 50px; height: 50px; margin-right: 40px;"></a>
          <a href="https://www.instagram.com/hutopy.inc/"><img src="../../../images/instafacebook.png"
              alt="Description image 3" style="width: 50px; height: 50px; margin-right:40px;"></a>
          <router-link :to="{ name: 'home' }">
            <img src="../../../images/ChevronBlanc.png" alt="Description image 1"
              style="width: 50px; height: 50px; margin-right: 40px;">
          </router-link>
        </v-row>
      </v-row>
    </v-container>

    <v-container class="text-center" style="flex-grow: 1;">
      <v-btn v-for="link in links" :key="link" class="mx-2" color="white" rounded="xl" variant="text">
        {{ link }}
      </v-btn>
    </v-container>

    <v-container class="text-white text-center">
      {{ new Date().getFullYear() }} — <strong>Hutopy</strong>
    </v-container>

  </div>
</template>



<script>
export default {
  data: () => ({
    links: [
      'Aide & Contact',
      'Conditions générales',
      'Politique des contenus',
      'Programme Ambassadeurs',
      'conditions_utilisation',
      'anti-exploitation',
    ],
  }),
}
</script>

<style>
.custom-footer {
  background-color: rgb(107, 0, 101, 1);
  padding: 10px;
  /* Ajoute un rembourrage intérieur de 10px autour du contenu du footer */
  margin: 0;
  /* Réinitialise les marges à zéro */
}

.no-margin {
  margin: 0 !important;
  /* Annule la marge de v-app */
}

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /* Pour aligner le contenu verticalement */
  background-color: rgba(107, 0, 101, 1);
}

footer a:not(:last-child) {
  margin-right: 20px;
  /* Ajoute de l'espace entre les images et les liens */
}

.footertextcolor {
  margin-top: 5px;
  margin-bottom: 40px;
  color: azure;
}

.socialiconspacer {
  margin-top: 25px;
}

.custom-color-button {
  background-color: rgb(255, 0, 0);
  /* Your custom color */
  color: white;
  /* Text color */
  font-size: 1.5rem;
  margin-top: 40px;
  margin-bottom: 40px;
}

.background {
  background-color: rgba(107, 0, 101, 1);
}
</style>