---
import Icon from '../AstroIcon.astro';

export interface Props {
  pageUrl: string;
  description: string;
}

const { pageUrl, description } = Astro.props;

const twitterUrl = `https://twitter.com/intent/tweet?text=${description}&url=${pageUrl}`;
const fbUrl = `https://www.facebook.com/sharer/sharer.php?quote=${description}&u=${pageUrl}`;
const hnUrl = `https://news.ycombinator.com/submitlink?t=${description}&u=${pageUrl}`;
const redditUrl = `https://www.reddit.com/submit?title=${description}&url=${pageUrl}`;
---

<div class='absolute left-[-18px] top-[110px] h-full hidden' id='page-share-icons'>
  <div class='flex sticky top-[100px] flex-col gap-1.5 items-center'>
    <a href={twitterUrl} target='_blank' class='text-gray-500 hover:text-gray-700 mb-0.5'>
      <Icon icon='twitter' />
    </a>
    <a href={fbUrl} target='_blank' class='text-gray-500 hover:text-gray-700'>
      <Icon icon='facebook' />
    </a>
    <a href={hnUrl} target='_blank' class='text-gray-500 hover:text-gray-700'>
      <Icon icon='hackernews' />
    </a>
    <a href={redditUrl} target='_blank' class='text-gray-500 hover:text-gray-700'>
      <Icon icon='reddit' />
    </a>
  </div>
</div>

<script src='./sharer.js'></script>