---
import Icon from '@components/ui/icons/icon.astro';

type SocialPlatform = {
  name: string;
  url: string;
  svg: 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}`,
    svg: 'facebook',
  },
  {
    name: 'X',
    url: `https://x.com/intent/tweet?url=${Astro.url}&text=${pageTitle}`,
    svg: 'x',
  },
  {
    name: 'LinkedIn',
    url: `https://www.linkedin.com/sharing/share-offsite/?url=${Astro.url}`,
    svg: 'linkedIn',
  },
];
---

<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">
          <Icon name={platform.svg} class="h-5 w-5" />
        </div>
      </a>
    ))
  }
</div>