---
import {
  IoMail,
  IoLogoFacebook,
  IoLogoPinterest,
  IoLogoTwitter,
} from "react-icons/io5";

interface Props {
  title?: string;
  description?: string | null;
  folder?: string;
  id?: string;
}

const { title, description, folder, id }: Props = Astro.props;

const baseURL = "https://janedoe.com";

const iconClass =
  "glass-t rounded text-txt-p dark:text-darkmode-txt-p flex h-9 w-9 items-center justify-center text-center intersect:animate-fadeUp opacity-0 hover:bg-opacity-20";
---

<ul class="">
  <li class="inline-block px-1">
    <a
      class={iconClass}
      href=`mailto:?subject=${title}&body=Check this out: ${baseURL}/${folder}/${id}%0D%0A%0D%0A${description}%0D%0A%0D%0A`
      title="Share by Email"
      aria-label="share by email"
      target="_blank"
      rel="noreferrer noopener"
    >
      <IoMail className="h-6 w-6" />
    </a>
  </li>
  <li class="inline-block px-1">
    <a
      class={iconClass}
      aria-label="facebook share button"
      href={`https://facebook.com/sharer/sharer.php?u=${baseURL}/${folder}/${id}`}
      target="_blank"
      rel="noreferrer noopener"
    >
      <IoLogoFacebook className="h-6 w-6" />
    </a>
  </li>
  <li class="inline-block px-1">
    <a
      class={iconClass}
      aria-label="twitter share button"
      href={`https://twitter.com/intent/tweet/?text=${title}&amp;url=${baseURL}/${folder}/${id}`}
      target="_blank"
      rel="noreferrer noopener"
    >
      <IoLogoTwitter className="h-6 w-6" />
    </a>
  </li>
  <li class="inline-block px-1">
    <a
      class={iconClass}
      aria-label="pinterest share button"
      href={`https://pinterest.com/pin/create/button/?url=${baseURL}/${folder}/${id}&media=&description=${description}`}
      target="_blank"
      rel="noreferrer noopener"
    >
      <IoLogoPinterest className="h-6 w-6" />
    </a>
  </li>
</ul>
