---
import { l, t, astroI18n } from "astro-i18n";
import AstroImage from "../components/AstroImage.astro";
import BaseLayout from "../layouts/BaseLayout.astro";

const currentLocale = astroI18n.langCode;

const { frontmatter, image, title } = Astro.props;
const publishedDate = new Date(frontmatter.pubDate);
const localizedDate = new Intl.DateTimeFormat(currentLocale, {
	dateStyle: "long",
}).format(publishedDate);
---

<BaseLayout pageTitle={title}>
	<p>
		Publié le&nbsp;: <time datetime={frontmatter.pubDate}>
			{localizedDate}.
		</time>
	</p>
	<p>
		{
			t("article.published", {
				datetime: frontmatter.pubDate,
				options: { dateStyle: "long" },
			})
		}
	</p>
	<div class="tags">
		{
			frontmatter.tags.map((tag) => (
				<p class="tag">
					<a href={l(`/tags/${[tag]}`)}>{tag}</a>
				</p>
			))
		}
	</div>
	<p>{frontmatter.description}</p>
	<pre></pre>
	<hr />
	{
		!!image && (
			<AstroImage
				src={image.url}
				alt={image.alt}
				width={image.width}
				height={image.height}
			/>
		)
	}
	<hr />
	<slot />
</BaseLayout>