<template>
  <section
    class="cookie"
    role="alert"
  >
    <header class="cookie__header">
      <h2 class="cookie__title" v-html="title"></h2>
      <button class="cookie__decline" @click.stop.prevent="$emit('close', false)"><cross></cross></button>
    </header>
    <div class="cookie__content" v-html="content"></div>
    <main-button :text="button" @callback="$emit('close', true)"></main-button>
  </section>
</template>

<script>
export default {
  name: 'cookie-modal',
  components: {
    Cross: () => import('@/components/icons/CrossIcon.vue'),
    MainButton: () => import('@/components/buttons/MainButton.vue'),
  },
  props: {
    title: {
      type: String,
      required: true,
    },
    content: {
      type: String,
      required: true,
    },
    button: {
      type: String,
      required: true,
    },
    descriptions: {
      type: Object,
      required: true,
      validator: (val) => {
        const KEYS = ['accept', 'decline'];
        return KEYS.every((key) => val.hasOwnProperty(key));
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.cookie {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: $white;
  border-radius: borde-rradius(primary);
  padding: 30px 40px 40px 40px;
  padding: 3rem 4rem 4rem 4rem;
  box-shadow: box-shadow(secondary);
  &__decline {
    position: absolute;
    top: 30px;
    right: 30px;
    /deep/
    svg {
      use {
        fill: $color-black-primary;
      }
    }
  }
  &__title {
    @include body-normal(medium);
  }
  &__content {
    @include body-small;
    margin-bottom: 20px;
    margin-bottom: 2rem;
    width: 85%;
  }
}
</style>

