<template>
  <b-card class="mb-3 lifted rounded-0">
    <h2>{{ title }}</h2>

    <b-row class="mx-2 qrcode-content">
      <b-col cols="12" md="5" xl="4">
        <h4>{{ qrLinkTitle }}</h4>
        <div class="text-center text-md-left">
          <qrcode :value="link" :options="{ width: 220 }"></qrcode>
        </div>
      </b-col>

      <b-col cols="12" md="7" xl="4" class="share">
        <h4 class="font-weight-bold-semi">{{ $t('ShareQR.ShareVia') }}</h4>
        <b-row class="py-3 social w-100">
          <b-col
            cols="6"
            md="4"
            v-for="(social, index) in sharePlatform"
            :key="`share-${index}`"
            class="py-2 text-center no-wrap"
          >
            <b-button
              v-if="social.url !== ''"
              :title="`${$t('ShareQR.ShareOn')} ${social.text}`"
              :href="social.url"
              target="_blank"
              variant="outline-light-extra"
              class="border-0 rounded-2"
              v-b-tooltip.hover
            >
              <icon :name="social.icon" />
            </b-button>
            <b-button
              v-else
              :title="social.text"
              @click="() => copyLink(link, defaultCopiedCallBack, false)"
              variant="outline-light"
              class="border-0 rounded-3"
              v-b-tooltip.hover
            >
              <icon :name="social.icon" />
            </b-button>
            <div class="font-weight-bolder">{{ social.text }}</div>
          </b-col>
        </b-row>
      </b-col>
    </b-row>
  </b-card>
</template>

<script>
import VueQrcode from '@chenfengyuan/vue-qrcode'
import { qrLinkCopyMixin } from '@/app/_global/mixins'
export default {
  name: 'ShareCard',
  mixins: [qrLinkCopyMixin],
  components: {
    qrcode: VueQrcode,
  },
  props: {
    title: { type: String, default: 'eshop' },
    qrLinkTitle: { type: String, default: '' },
    link: { type: String, default: 'eshop' },
    sharePlatform: { type: Array, default: () => [] },
  },
}
</script>
