<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;
  right: 8px;
  left: 8px;
  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>
