---
import type { Posts } from "@content/config";
import { t, type Lang } from "@i18n";
import { IconEkasPortal, IconFurAffinity, IconInkbunny, IconSoFurry, IconWeasyl } from "./icons/brands";

type Props = {
  lang: Lang;
  posts?: Posts;
};

const { lang, posts } = Astro.props;
const { eka, furaffinity, inkbunny, sofurry, weasyl } = posts ?? {};
const isVisible = eka || furaffinity || inkbunny || sofurry || weasyl;
---

{
  isVisible ? (
    <section id="external-posts-section" class="my-5 px-2 font-serif" aria-describedby="title-external-posts">
      <>
        <h2 id="title-external-posts" class="py-2 font-serif text-xl font-semibold text-stone-800 dark:text-stone-100">
          {t(lang, "published_content/syndication_see_also_on")}
        </h2>
        <ul id="external-posts" class="flex flex-wrap justify-around">
          {eka ? (
            <li class="min-w-12 grow">
              <a
                class="u-syndication text-link w-full"
                href={eka.link}
                target="_blank"
                aria-label={t(lang, "published_content/syndication_eka")}
              >
                <IconEkasPortal class="mx-auto" width="2rem" height="2rem" />
                <span class="sr-only">{t(lang, "published_content/syndication_eka")}</span>
              </a>
            </li>
          ) : null}
          {furaffinity ? (
            <li class="min-w-12 grow">
              <a
                class="u-syndication text-link w-full"
                href={furaffinity.link}
                target="_blank"
                aria-label={t(lang, "published_content/syndication_furaffinity")}
              >
                <IconFurAffinity class="mx-auto" width="2rem" height="2rem" />
                <span class="sr-only">{t(lang, "published_content/syndication_furaffinity")}</span>
              </a>
            </li>
          ) : null}
          {inkbunny ? (
            <li class="min-w-12 grow">
              <a
                class="u-syndication text-link w-full"
                href={inkbunny.link}
                target="_blank"
                aria-label={t(lang, "published_content/syndication_inkbunny")}
              >
                <IconInkbunny class="mx-auto" width="2rem" height="2rem" />
                <span class="sr-only">{t(lang, "published_content/syndication_inkbunny")}</span>
              </a>
            </li>
          ) : null}
          {sofurry ? (
            <li class="min-w-12 grow">
              <a
                class="u-syndication text-link w-full"
                href={sofurry.link}
                target="_blank"
                aria-label={t(lang, "published_content/syndication_sofurry")}
              >
                <IconSoFurry class="mx-auto" width="2rem" height="2rem" />
                <span class="sr-only">{t(lang, "published_content/syndication_sofurry")}</span>
              </a>
            </li>
          ) : null}
          {weasyl ? (
            <li class="min-w-12 grow">
              <a
                class="u-syndication text-link w-full"
                href={weasyl.link}
                target="_blank"
                aria-label={t(lang, "published_content/syndication_weasyl")}
              >
                <IconWeasyl class="mx-auto" width="2rem" height="2rem" />
                <span class="sr-only">{t(lang, "published_content/syndication_weasyl")}</span>
              </a>
            </li>
          ) : null}
        </ul>
      </>
    </section>
  ) : null
}

<script>
  import tippy from "tippy.js";
  import "tippy.js/dist/tippy.css";

  const clipboardItems = document.querySelectorAll<HTMLElement>("ul#external-posts a[aria-label]");

  tippy(clipboardItems, {
    content: (el) => (el as HTMLElement).getAttribute("aria-label")!,
    theme: "bm",
  });
</script>
