<template>
  <ma-modal
    :title="$t('basicInfoTitle')"
    width="large"
    header-type="white"
    class="privacy-modal"
  >
    <template #trigger="{ openModal }">
      <slot :openModal="openModal" />
    </template>
    <template #content="{ closeModal }">
      <ma-stack align="right" space="large">
        <commercial-communications-table :comunicationType="comunicationType" />
        <ma-button class="button" @click="closeModal" :text="$t('ok')" />
      </ma-stack>
    </template>
  </ma-modal>
</template>

<script lang="ts">
import CommercialCommunicationsTable from '../CommercialCommunicationsTable/CommercialCommunicationsTable.vue'

export default {
  components: {
    CommercialCommunicationsTable,
  },
  props: {
    comunicationType: {
      type: String,
      validator: (value: string) =>
        ['commercial', 'newsletter', 'collaborator'].includes(value),
      default: 'commercial',
    },
  },
  i18n: {
    messages: {
      es: {
        basicInfoTitle: 'Información básica sobre Protección de Datos',
        ok: 'Entendido',
      },
      ca: {
        basicInfoTitle: 'Informació bàsica sobre la Protecció de Dades',
        ok: 'Entesos',
      },
      en: {
        basicInfoTitle: 'Basic information about Data Protection',
        ok: 'Close and continue',
      },
    },
  },
}
</script>

<style lang="postcss" scoped>
.button {
  width: 13rem;
}
</style>
