---
import { getCollection } from "astro:content";
import { useTranslation, getLanguageFromURL } from "@i18n/utils";
import * as utils from "@utils/index";
import PageLayout from "@layouts/default.astro";
import PageHeading from "@components/PageHeading.astro";
import ArticlesList from "@root/components/ArticlesList";
import SearchInput from "@components/SearchInput";
import TagsList from "@components/TagsList";

const t = useTranslation(Astro);
const pageLang = getLanguageFromURL(Astro.url.pathname);
const articles = await getCollection("blog", (e) => !e.data.draft);
const tags = utils.getUniqueTags(articles);
const filtered = utils.removeDuplicates(articles, pageLang);
const canonicalUrl = new URL(Astro.url.pathname, Astro.site);
---

<PageLayout
	lang={pageLang}
	title={t("pageTitle.articles")}
	description={t("pageDescription.articles")}
	canonicalUrl={canonicalUrl.href}
>
	<PageHeading heading={t("pageTitle.articles")} description={t("pageDescription.articles")} />
	<section>
		<SearchInput i18n={{ "input.search": t("input.search") }} client:load />
		<TagsList data={tags} client:load />
		<ArticlesList
			client:load
			i18n={{ "articles.empty": t("articles.empty") }}
			data={{ articles: utils.formatToArticleBlocks(filtered), pageLang }}
		/>
	</section>
</PageLayout>