---
import Logo from "@components/images/Logo.astro"

type SocialPlatform = {
  name: string;
  url: string;
  iconLight: string;
  iconDark: string;
};

interface Props {
  pageTitle: string;
}

const { pageTitle } = Astro.props;

const socialPlatforms: SocialPlatform[] = [
  {
    name: 'Facebook',
    url: `https://www.facebook.com/sharer/sharer.php?u=${Astro.url}`,
    iconLight: 'https://cdn.jsdelivr.net/gh/selfhst/icons@main/webp/facebook.webp',
    iconDark: 'https://cdn.jsdelivr.net/gh/selfhst/icons@main/webp/facebook.webp',
  },
  {
    name: 'Twitter',
    url: `https://x.com/intent/tweet?url=${Astro.url}&text=${pageTitle}`,
    iconLight: 'https://cdn.jsdelivr.net/gh/selfhst/icons@main/webp/twitter.webp',
    iconDark: 'https://cdn.jsdelivr.net/gh/selfhst/icons@main/webp/twitter.webp',
  },
  {
    name: 'LinkedIn',
    url: `https://www.linkedin.com/sharing/share-offsite/?url=${Astro.url}`,
    iconLight: 'https://cdn.jsdelivr.net/gh/selfhst/icons@main/webp/linkedin.webp',
    iconDark: 'https://cdn.jsdelivr.net/gh/selfhst/icons@main/webp/linkedin.webp',
  },
];
---

<div class="inline-flex items-center gap-x-2">
  {socialPlatforms.map((platform) => (
  <a
    class="button-base-hidden group inline-flex rounded-lg gap-x-2"
    href={platform.url}
    target="_blank"
    rel="noopener noreferrer"
    title={`Share on ${platform.name}`}
  >
    <div class="button-text-title-hidden flex relative items-center text-center">
      <Logo
        srcLight={platform.iconLight}
        srcDark={platform.iconDark}
        alt={platform.name}
        width="24"
        height="24"
      />
    </div>
  </a>
  ))}
</div>