<template>
    <span v-if="loading"></span>
    <span class="wcc-gcm-notice-wrapper" v-else-if="!gcmStatus">
      <notice
        type="info"
        isDismissable
        style="margin-top: 20px; margin-bottom: 10px"
        class="wcc-gcm-notice"
      >
        <div class="wcc-align-center">
          <div class="wcc-gcm-notice">
            <p class="wcc-notice-text">
              {{
                $i18n.__(
                  "To ensure compliance with regulations and enhance user experience, it’s crucial that Google services like Analytics, Ads, and Google Tag Manager (GTM) are able to confirm user consent before delivering personalized ads. We strongly recommend enabling Google Consent Mode to facilitate this process and stay compliant with data privacy requirements.",
                  "webtoffee-cookie-consent"
                )
              }}
            </p>
          </div>
        </div>
      </notice>
    </span>
  </template>
  
  <script>
  import { mapState } from "vuex";
  import Notice from "@/components/elements/Notice.vue";
  
  export default {
    name: "GCMNotice",
    components: { Notice },
    data() {
      return {
      };
    },
    methods: {
    },
    computed: {
      ...mapState("settings", ["info"]),
      gcmStatus() {
        return this.$store.state.settings.options.google_consent_mode.status;
      },
      loading() {
        return this.info === false;
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>

  </style>