<template>
  <Container class="content-mobile">
    <h2 v-if="$slots.headline" class="headline">
      <slot name="headline"></slot>
    </h2>
    <div class="items">
      <template v-for="item in items" :key="item.title">
        <Paragraph :paragraph="item" />
      </template>
    </div>
    <VButton
      class="button"
      size="extra-big"
      icon-right="button-arrow"
      justify="space-between"
      @click="bookCall">
      <slot name="buttonText"></slot>
    </VButton>
  </Container>
<!--  <VPopup-->
<!--    v-if="popupIsOpened"-->
<!--    :is-opened="popupIsOpened"-->
<!--    :time-duration="3000"-->
<!--    @close="popupIsOpened = false">-->
<!--    <VPopupText />-->
<!--  </VPopup>-->
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { IAboutUsSwiper } from './AboutUsSwiper.types';
import Paragraph from './Paragraph.vue';
import VButton from '@/components/ui/common/VButton.vue';
import Container from '@/components/ui/Container.vue';
import { BOOK_CALL_LINK } from '@/utils/constants';
import isCountryBanned from '@/utils/isCountryBanned';
// import VPopup from '@/components/ui/common/VPopup.vue'
;
// import VPopupText from '@/components/ui/common/VPopupText.vue';
export default defineComponent({
  components: { Container, VButton, Paragraph },

  props: {
    items: {
      type: Array as PropType<IAboutUsSwiper.Item[]>,
      required: true,
    },
  },

  data: () => ({
    popupIsOpened: false,
  }),

  methods: {
    bookCall() {
      return isCountryBanned()
        ? (this.popupIsOpened = true)
        : window.open(BOOK_CALL_LINK, '_target');
    },
  },
});
</script>

<style lang="scss" scoped>
.content-mobile {
  display: none;
}

.headline {
  max-width: 400px;
  margin-bottom: 48px;

  color: #242628;
  font-weight: bold;
  font-size: 26px;
  line-height: 136%;
}

.items {
  display: flex;
  flex-direction: column;
  row-gap: 80px;
}
</style>
