---
import type { Posts } from "src/content.config";
import { t, type Lang } from "@i18n";
import { IconEkasPortal, IconFurAffinity, IconInkbunny, 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">
      <Fragment>
        <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 flex w-full flex-col" href={eka.link} target="_blank">
                <IconEkasPortal class="mx-auto" width="2rem" height="2rem" />
                <span class="text-center text-xs">{t(lang, "published_content/syndication_eka")}</span>
              </a>
            </li>
          ) : null}
          {furaffinity ? (
            <li class="min-w-12 grow">
              <a class="u-syndication text-link flex w-full flex-col" href={furaffinity.link} target="_blank">
                <IconFurAffinity class="mx-auto" width="2rem" height="2rem" />
                <span class="text-center text-xs">{t(lang, "published_content/syndication_furaffinity")}</span>
              </a>
            </li>
          ) : null}
          {inkbunny ? (
            <li class="min-w-12 grow">
              <a class="u-syndication text-link flex w-full flex-col" href={inkbunny.link} target="_blank">
                <IconInkbunny class="mx-auto" width="2rem" height="2rem" />
                <span class="text-center text-xs">{t(lang, "published_content/syndication_inkbunny")}</span>
              </a>
            </li>
          ) : null}
          <!-- {sofurry ? (
            <li class="min-w-12 grow">
              <a class="u-syndication text-link flex w-full flex-col" href={sofurry.link} target="_blank">
                <IconSoFurry class="mx-auto" width="2rem" height="2rem" />
                <span class="text-center text-xs">{t(lang, "published_content/syndication_sofurry")}</span>
              </a>
            </li>
          ) : null} -->
          {weasyl ? (
            <li class="min-w-12 grow">
              <a class="u-syndication text-link flex w-full flex-col" href={weasyl.link} target="_blank">
                <IconWeasyl class="mx-auto" width="2rem" height="2rem" />
                <span class="text-center text-xs">{t(lang, "published_content/syndication_weasyl")}</span>
              </a>
            </li>
          ) : null}
        </ul>
      </Fragment>
    </section>
  ) : null
}
