---
import LinkButton from "@/components/LinkButton.astro";
import { tplStr, useTranslations } from "@/i18n";
import config from "@/config";

const { shareLinks } = config;
const t = useTranslations(Astro.currentLocale);

const icons = import.meta.glob<{
  default: (_props: Record<string, unknown>) => unknown;
}>("/src/assets/icons/socials/*.svg");

const pageUrl = Astro.url;

const platformLabel = (name: string) =>
  name.charAt(0).toUpperCase() + name.slice(1);

const items = await Promise.all(
  shareLinks.map(async ({ name, url, linkTitle }) => {
    const mod = await icons[`/src/assets/icons/socials/${name}.svg`]?.();
    const Icon = mod?.default;
    const title =
      linkTitle ??
      (name === "mail"
        ? t.post.sharePostViaEmail
        : tplStr(t.post.sharePostOn, { platform: platformLabel(name) }));
    return { url, title, Icon };
  })
);
---

{
  items.some(({ Icon }) => Icon) && (
    <div class="flex flex-none flex-col items-center justify-center gap-1 md:items-start">
      <span class="italic">{t.post.sharePostIntro}</span>
      <div class="text-center">
        {items.map(({ url, title, Icon }) =>
          Icon ? (
            <LinkButton
              href={`${url}${pageUrl}`}
              class="scale-90 p-2 hover:rotate-6 sm:p-1"
              title={title}
              target="_blank"
              rel="noopener noreferrer"
            >
              <Icon class="inline-block size-6 scale-125 fill-transparent stroke-current stroke-2 opacity-90 group-hover:fill-transparent sm:scale-110" />
              <span class="sr-only">{title}</span>
            </LinkButton>
          ) : null
        )}
      </div>
    </div>
  )
}
