---
export interface Props {
  title: string;
  url: string;
  class?: string;
}

const { title, url, class: className = '' } = Astro.props;
const encodedTitle = encodeURIComponent(title);
const encodedUrl = encodeURIComponent(url);
---

<div class={`flex items-center gap-4 mt-8 ${className}`}>
  <span class="text-sm font-medium text-zinc-500 dark:text-zinc-400">Share:</span>
  <div class="flex gap-2">
    <a
      href={`https://twitter.com/intent/tweet?text=${encodedTitle}&url=${encodedUrl}`}
      target="_blank"
      rel="noopener noreferrer"
      class="rounded-full p-2 text-zinc-500 transition-all duration-300 hover:bg-zinc-100 hover:text-zinc-700 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-300"
      aria-label="Share on Twitter"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="h-4 w-4"
        ><path
          d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"
        ></path></svg
      >
    </a>
    <a
      href={`https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`}
      target="_blank"
      rel="noopener noreferrer"
      class="rounded-full p-2 text-zinc-500 transition-all duration-300 hover:bg-zinc-100 hover:text-zinc-700 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-300"
      aria-label="Share on Facebook"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="h-4 w-4"
        ><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg
      >
    </a>
    <a
      href={`https://www.linkedin.com/shareArticle?mini=true&url=${encodedUrl}&title=${encodedTitle}`}
      target="_blank"
      rel="noopener noreferrer"
      class="rounded-full p-2 text-zinc-500 transition-all duration-300 hover:bg-zinc-100 hover:text-zinc-700 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-300"
      aria-label="Share on LinkedIn"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="h-4 w-4"
        ><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"
        ></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"
        ></circle></svg
      >
    </a>
    <button
      id="copy-link-button"
      class="relative rounded-full p-2 text-zinc-500 transition-all duration-300 hover:bg-zinc-100 hover:text-zinc-700 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-300"
      aria-label="Copy link"
      title="Copy link to clipboard"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="h-4 w-4"
        ><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path
          d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg
      >
      <span
        id="copy-tooltip"
        class="absolute -top-8 left-1/2 -translate-x-1/2 transform whitespace-nowrap rounded bg-zinc-800 px-2 py-1 text-xs text-white opacity-0 transition-opacity duration-300 dark:bg-zinc-700"
      >
        Copied!
      </span>
    </button>
  </div>
</div>

<script>
  // Function to handle copy link button
  function setupCopyLinkButton() {
    const copyButtons = document.querySelectorAll('#copy-link-button');

    copyButtons.forEach((button) => {
      button.addEventListener('click', () => {
        // Get the current URL
        const url = window.location.href;

        // Copy to clipboard
        navigator.clipboard
          .writeText(url)
          .then(() => {
            // Show tooltip
            const tooltip = button.querySelector('#copy-tooltip');
            if (tooltip) {
              tooltip.classList.add('opacity-100');

              // Hide tooltip after 2 seconds
              setTimeout(() => {
                tooltip.classList.remove('opacity-100');
              }, 2000);
            }
          })
          .catch((err) => {
            console.error('Failed to copy: ', err);
          });
      });
    });
  }

  // Set up the copy link button when the DOM is loaded
  document.addEventListener('DOMContentLoaded', setupCopyLinkButton);

  // Also set up when the page content is updated via SPA navigation
  document.addEventListener('astro:page-load', setupCopyLinkButton);

  // For compatibility with the custom page transition system
  document.addEventListener('page-transition-complete', setupCopyLinkButton);

  // Handle SPA transitions for share links
  function setupSpaTransitions() {
    // Get all share links
    const shareLinks = document.querySelectorAll('a[target="_blank"][rel="noopener noreferrer"]');

    // Make sure external share links don't trigger page transitions
    shareLinks.forEach((link) => {
      link.setAttribute('data-spa-external', 'true');
    });
  }

  // Initialize SPA transitions
  document.addEventListener('DOMContentLoaded', setupSpaTransitions);
  document.addEventListener('astro:page-load', setupSpaTransitions);
  document.addEventListener('page-transition-complete', setupSpaTransitions);

  // Dispatch custom event when share action is completed
  function notifyShareComplete() {
    document.dispatchEvent(new CustomEvent('share-action-complete'));
  }

  // Add analytics tracking for share actions if needed
  function trackShareAction(platform) {
    // You can implement analytics tracking here
    console.log(`Shared on ${platform}`);

    // Notify other components that share action is complete
    notifyShareComplete();
  }
</script>