---
import AstroImage from "../components/AstroImage.astro";
import BaseLayout from "../layouts/BaseLayout.astro";

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

<BaseLayout pageTitle={title}>
	<p>Publié le&nbsp;: {frontmatter.pubDate.slice(0, 10)}</p>
	<time datetime={published}>
		{publishedDate}.
	</time>
	<div class="tags">
		{
			frontmatter.tags.map((tag) => (
				<p class="tag">
					<a href={`/tags/${tag}`}>{tag}</a>
				</p>
			))
		}
	</div>
	<p>{frontmatter.description}</p>
	<hr />
	{
		!!image && (
			<AstroImage
				src={image.url}
				alt={image.alt}
				width={image.width}
				height={image.height}
			/>
		)
	}
	<hr />
	<slot />
</BaseLayout>