---
import { getLanguageFromURL, useTranslation } from "@root/i18n/utils";
import { createRelativeArticleUrl } from "@root/utils";
import { Article_TranslationsQuery } from "../graphql/graphql";

export interface Props {
	articles: Article_TranslationsQuery["article_translations"][0]["article_id"];
}

const pageLang = getLanguageFromURL(Astro.url.pathname);
const t = useTranslation(Astro);
const { articles } = Astro.props;
---

{
	articles && articles.translations && articles.translations?.length !== 1 && (
		<div>
			{t("article.availableOn")}:{" "}
			{articles.translations
				.filter((a) => a && a.languages_code?.code.split("-")[0] !== pageLang)
				.map(
					(a) =>
						a && (
							<a
								href={`${createRelativeArticleUrl({ slug: a.slug, articleLang: `${a.languages_code?.code.split("-")[0]}`, pubDate: a.pub_date })}`}
							>{`${a.languages_code?.name}`}</a>
						)
				)}
		</div>
	)
}

<style lang="scss">
	div {
		margin: 10px 0;
		font-size: var(--font-size-lg);
		& a {
			&:not(:last-child)::after {
				content: ",";
			}
		}
	}
</style>