---
import LinkButton from "./LinkButton.astro";
import { Icon } from "astro-icon/components";


const URL = Astro.url;

const shareLinks = [
  {
    name: "WhatsApp",
    href: "https://wa.me/?text=",
    icon: "simple-icons:whatsapp",
    linkTitle: `Share this post via WhatsApp`,
  },
  {
    name: "Facebook",
    href: "https://www.facebook.com/sharer.php?u=",
    icon: "simple-icons:facebook",
    linkTitle: `Share this post on Facebook`,
  },
  {
    name: "Twitter/X",
    href: "https://twitter.com/intent/tweet?url=",
    icon: "simple-icons:x",
    linkTitle: `Tweet this post`,
  },
  {
    name: "Telegram",
    href: "https://t.me/share/url?url=",
    icon: "simple-icons:telegram",
    linkTitle: `Share this post via Telegram`,
  },
  {
    name: "Pinterest",
    href: "https://pinterest.com/pin/create/button/?url=",
    icon: "simple-icons:pinterest",
    linkTitle: `Share this post on Pinterest`,
  },
  {
    name: "Mail",
    href: "mailto:?subject=See%20this%20post&body=",
    icon: "fa6-solid:envelope",
    linkTitle: `Share this post via email`,
  },
] as const;
---

<div class={`social-icons`}>
  <span class="italic">Share this post on:</span>
  <div class="text-center">
    {
      shareLinks.map(social => (
        <LinkButton
          href={`${social.href + URL}`}
          className="link-button"
          title={social.linkTitle}
        >
          <Icon name={ social.icon } title={social.linkTitle} />
        </LinkButton>
      ))
    }
  </div>
</div>


