---
import { ArticleItem } from "@components/ArticleItem";
import UIString from "@components/UIString";
import { getLanguageFromURL } from "@utils/url";
import { sortArtcilesByDate } from "@utils/articles";
import EmptyList from "./EmptyList.astro";
import TranslatedLink from "@components/TranslatedLink";

export interface Props {
	articles: ArticleType[];
	length?: number | undefined;
}

const { articles, length = 5 } = Astro.props as Props;

const lang = getLanguageFromURL(Astro.url.pathname);
const recent = sortArtcilesByDate(articles);
const isEmpty = recent.length === 0;
---

<section>
	<div>
		<h2><UIString key={"recentArticles.heading"} /></h2>
		<TranslatedLink to="/articles/">
			<UIString key={"recentArticles.all"} />
		</TranslatedLink>
	</div>

	<div>
		{!isEmpty ? recent.slice(0, length).map((article) => <ArticleItem lang={lang} data={article} />) : <EmptyList />}
	</div>
</section>

<style lang="scss">
	section {
		& > div:nth-child(1) {
			display: flex;
			align-items: center;
			column-gap: 15px;
			row-gap: 5px;
			flex-wrap: wrap;
			justify-content: space-between;
			border-bottom: 1px solid var(--border-color);
			padding-bottom: 10px;

			& h2 {
				margin: 0;
			}
		}

		& > div:nth-child(2) {
			margin-top: 10px;
			max-width: calc(var(--content-width) + (var(--content-padding) * 2));
		}
	}
</style>