<template>
  <div>
    <div class="d-grid gap-2 mx-auto" style="width: 250px">
      <img
        style="width: 250px; height: auto"
        :src="imgSrc"
        alt="Featured banner"
      />
      <button @click="getEmbedCode" class="btn btn-sm btn-outline-primary px-3">
        Get HTML embed code
      </button>
    </div>
  </div>
</template>

<script>
import { toast } from "vue3-toastify";
export default {
  name: "GetEmbedCode",
  mixins: [],
  components: {},
  props: ["url", "name"],
  data: () => ({
    imgSrc: "https://cdn.aibuddytool.com/featured-on-aibuddytool-1-1000.webp",
    showToast: false,
  }),
  computed: {
    embedCode() {
      return (
        "<!-- " +
        this.name +
        ' featured by AiBuddyTool.com --><a href="' +
        this.url +
        '" target="_blank"><img alt="' +
        this.name +
        '" style="width: 250px; height: auto" src="' +
        this.imgSrc +
        '"></a>'
      );
    },
  },
  methods: {
    getEmbedCode() {
      const el = document.createElement("textarea");
      el.value = this.embedCode;
      document.body.appendChild(el);
      el.select();
      document.execCommand("copy");
      document.body.removeChild(el);

      toast(
        "Copied! Paste the HTML embed code at the bottom of your business website footer.",
        {
          position: "bottom-center",
          type: "success",
          timeout: 3000,
          closeOnClick: true,
          pauseOnFocusLoss: true,
          pauseOnHover: true,
          draggable: true,
          draggablePercent: 0.6,
          showCloseButtonOnHover: false,
          hideProgressBar: false,
          closeButton: true,
          icon: true,
          rtl: false,
        },
      );
    },
  },
  mounted() {},
};
</script>

<style scoped></style>
