<template>
  <div class="marko-web-p1-events-social-share-listener" style="display: none;" />
</template>

<script>
export default {
  inject: ['EventBus'],

  props: {
    entity: {
      type: String,
      default: null,
    },
    eventName: {
      type: String,
      default: 'social-share-open',
    },
    category: {
      type: String,
      default: 'Engagement',
    },
  },

  created() {
    if (!window.p1events) return;

    this.EventBus.$on(this.eventName, (event) => {
      const { provider, url, title } = event || {};
      const providerName = provider?.name || provider;

      if (!providerName || !url) return;

      window.p1events('track', {
        category: this.category,
        action: 'Share',
        label: providerName,
        ...(this.entity && { entity: this.entity }),
        props: {
          provider: providerName,
          url,
          ...(title && { title }),
        },
      });
    });
  },
};
</script>
