<template>
  <ma-stack space="small" class="closed-call-module">
    <ma-text bold tone="gray-dark" size="small" v-t="'haveDoubts'" />
    <ma-button class="button" @click="open" icon="Phone" :text="$t('button')" />
  </ma-stack>
</template>

<script lang="ts">
import { dataLayerPush } from '@kalimotxo/ui/utils/push-event'

export default {
  props: {
    eventCategory: { type: String, required: true },
  },
  methods: {
    open() {
      dataLayerPush({
        event: 'gaEvent',
        eventAction: 'Flotante',
        eventCategory: this.eventCategory,
        eventLabel: 'Abrir flotante',
      })
      this.$emit('open')
    },
  },
  i18n: {
    messages: {
      es: {
        haveDoubts: '¿Tienes dudas?',
        button: 'Asistente virtual',
      },
      ca: {
        haveDoubts: 'Tens dubtes?',
        button: 'Assistent virtual',
      },
      en: {
        haveDoubts: 'Any doubts?',
        button: 'Virtual assistant',
      },
    },
  },
}
</script>

<style scoped>
.closed-call-module {
  position: fixed;
  padding: 1.3rem 1rem 1rem;
  background: var(--color-white-dark);
  box-shadow: var(--shadow-fancy);
}

@media (--mobile) {
  .closed-call-module {
    right: 0;
    left: 0;
    bottom: 0;
    border-radius: 5px 5px 0 0;
    max-width: 30rem;
    margin: auto;
    /* Shadow-fancy with a different orientation */
    box-shadow: 0px 0px 18px var(--color-brown-base);
  }
}

@media (--desktop) {
  .closed-call-module {
    right: 1rem;
    bottom: 3rem;
    min-width: 14.5rem;
    border-radius: var(--radius-medium);
  }
}

.button {
  height: 2.5rem;
}

.icon {
  margin-right: 0.25rem;
}
</style>
