<template>
  <footer class="pkt-footer-simple" data-mode="dark">
    <div class="pkt-footer-simple__container">
      <ul class="pkt-footer-simple__list">
        <li class="pkt-footer-simple__list-item" v-for="(item, index) in links" :key="`links-${index}`">
          <a
            class="pkt-footer-simple__link"
            :class="{ 'pkt-link--external': item.external }"
            :href="item.href"
            :target="item.openInNewTab || openLinksInNewTab ? '_blank' : '_self'"
            :rel="item.openInNewTab || openLinksInNewTab ? 'noopener noreferrer' : undefined"
          >
            <PktIcon class="pkt-footer-simple__link-icon" name="chevron-right"></PktIcon>
            {{ item.text }}
          </a>
        </li>
        <li class="pkt-footer-simple__list-item">
          <a
            class="pkt-footer-simple__link"
            :href="personvernOgInfoLink"
            :target="openLinksInNewTab ? '_blank' : '_self'"
            :rel="openLinksInNewTab ? 'noopener noreferrer' : undefined"
          >
            <PktIcon class="pkt-footer-simple__link-icon" name="chevron-right"></PktIcon>
            Personvern og informasjonskapsler
          </a>
        </li>
        <li class="pkt-footer-simple__list-item">
          <a
            class="pkt-footer-simple__link"
            :href="tilgjengelighetLink"
            :target="openLinksInNewTab ? '_blank' : '_self'"
            :rel="openLinksInNewTab ? 'noopener noreferrer' : undefined"
          >
            <PktIcon class="pkt-footer-simple__link-icon" name="chevron-right"></PktIcon>
            Tilgjengelighet
          </a>
        </li>
        <li class="pkt-footer-simple__list-item">
          <pkt-consent
            v-if="includeConsent"
            :googleAnalyticsId="googleAnalyticsId"
            :hotjarId="hotjarId"
            triggerType="footerlink"
          ></pkt-consent>
        </li>
      </ul>
    </div>
  </footer>
</template>

<script>
import PktIcon from '../icon/Icon.vue'
import '@oslokommune/punkt-elements/dist/pkt-consent.js'

export default {
  name: 'PktFooterSimple',
  components: {
    PktIcon,
  },
  props: {
    links: {
      type: Array,
      default: () => [],
      validator: (value) => value.every((link) => typeof link.href === 'string' && typeof link.text === 'string'),
    },
    personvernOgInfoLink: {
      type: String,
      default: 'https://www.oslo.kommune.no/personvern-og-informasjonskapsler/',
      required: false,
    },
    tilgjengelighetLink: {
      type: String,
      default: 'https://www.oslo.kommune.no/tilgjengelighet/',
      required: false,
    },
    openLinksInNewTab: {
      type: Boolean,
      default: false,
      required: false,
    },
    includeConsent: {
      type: Boolean,
      default: false,
      required: false,
    },
    googleAnalyticsId: {
      type: String,
      default: null,
      required: false,
    },
    hotjarId: {
      type: String,
      default: null,
      required: false,
    },
  },
}
</script>
