<template>
  <Head />
  <teleport v-if="readyTeleport && jsonld" to="head">
    <component :is="'script'" type="application/ld+json">
      {{ jsonld }}
    </component>
  </teleport>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

import { Head } from '@vueuse/head';
import { useRoute } from 'vue-router';

export default defineComponent({
  components: {
    Head,
  },

  props: {
    title: {
      type: String,
      default: 'B2B Lead Generation Agency | Belkins',
    },
    route: {
      type: String,
      default: () => useRoute().path,
    },
    description: {
      type: String,
      default:
        'Belkins is an award-winning B2B lead generation company providing lead research, outreach, and appointment setting services to SMEs across the United States',
    },
    url: {
      type: String,
      required: false,
      default: '',
    },
    image: {
      type: String,
      required: false,
      default: '',
    },
    jsonld: {
      type: Object,
      default: () => {},
    },
  },

  // setup(props) {
  //   const meta = pageHead({
  //     title: props.title,
  //     route: props.route,
  //     description: props.description,
  //     image: props.image,
  //     url: props.url,
  //   });
  //   useHead(meta);
  // },
  data() {
    return {
      readyTeleport: false,
    };
  },

  mounted() {
    this.readyTeleport = true;
  },
});
</script>
