<template>
  <ClientOnly>
    <BAlert class="cookies" :show="show">
      <div class="cookies-container">
        <span class="title">Uso de cookies</span>
        <p>
          Utilizamos cookies propias y de terceros para mejorar la navegación.
          Si continúa navegando, consideramos que acepta su uso. Puede obtener
          más información, o bien conocer cómo cambiar la configuración, en
          nuestra <NuxtLink to="/page/cookies">Política de cookies</NuxtLink>.
        </p>
        <BButton size="sm" variant="success" @click="close">Aceptar</BButton>
      </div>
    </BAlert>
  </ClientOnly>
</template>

<script>
import { useAuthStore } from '@/stores/auth'
import { mapActions } from 'pinia'
export default {
  name: 'CookieUsageNotification',
  data() {
    return {
      show: undefined,
    }
  },

  mounted() {
    const auth = useAuthStore()
    if (auth.cookiesAccepted === true) {
      this.show = false
    } else {
      this.show = true
    }
  },

  methods: {
    ...mapActions(useAuthStore, ['acceptCookies']),
    close() {
      this.show = false
      this.acceptCookies()
    },
  },
}
</script>

<style lang="scss" scoped>
.cookies {
  z-index: 999;
  position: fixed;
  bottom: 0px;
  background-color: $color-navy;
  border: none;
  color: $color-light;
  a {
    color: $color-light;
    text-decoration: underline;
  }
  span {
    font-size: $m;
    font-weight: $bold;
  }
  p {
    font-size: $s;
  }
}
.cookies-container {
  font-weight: $regular;
}
.btn {
  background-color: $color-navy;
  color: $color-light;
  border: 2px solid $color-orange;
  padding: 0.5em 1em;
  margin: auto;

  &:hover {
    background-color: $color-orange;
  }
}
</style>
