---
import { Picture } from "@astrojs/image/components";
import { Icon } from "astro-icon";
import { createDateFormatter } from "@root/utils";
// import { isURL } from "@utils/string";
import ArticleComments from "@components/ArticleComments.astro";
// import TranslatedLink from "../TranslatedLink";
import type { CollectionEntry } from "astro:content";
// import { useTranslation } from "@root/i18n/utils";
import "./ArticlePost.scss";
export type Props = {
	article: CollectionEntry<"blog">;
	lang: string;
};
const { article, lang } = Astro.props as Props;
const canonicalUrl = new URL(Astro.url.pathname, Astro.site);
const {
	data: { coverImage, title, author, description, tags, pubDate },
	slug,
} = article;
// const t = useTranslation(Astro);
---

<article itemscope itemtype="http://schema.org/BlogPosting" class="article">
	<header>
		<div>
			{
				tags && (
					<div class="tags">
						<ul itemprop="keywords">
							{tags.map((tag) => (
								<li>
									<a rel="tag" href={`/articles/?tags=${tag.toLocaleLowerCase()}`}>{`${tag}${
										tags.at(-1) === tag ? "" : ","
									}`}</a>
								</li>
							))}
						</ul>
					</div>
				)
			}
			<div class="views">
				<Icon name="eye" width="21" height="21" />
				<span><span id="views">---</span>&nbsp;{"просмотров"}</span>
			</div>
		</div>
		<div class="heading">
			<h1 itemprop="headline">{title}</h1>
		</div>
		<div class="published">
			<time itemprop="datePublished" datetime={pubDate.toString()}
				>{createDateFormatter(lang).format(pubDate)}</time
			>
			<span itemprop="author">{author}</span>
		</div>
		{
			coverImage && (
				<div class="cover">
					<figure>
						<Picture
							itemprop="image"
							src={coverImage}
							sizes="(max-width: 450px) 450px, 700px"
							widths={[450, 700]}
							formats={["webp"]}
							aspectRatio={"16:9"}
							alt={title}
							background={"chocolate"}
						/>
					</figure>
				</div>
			)
		}
		<div class="description">
			<p>
				{description}
			</p>
		</div>
	</header>
	<slot />
	<ArticleComments url={canonicalUrl.href} id={slug} />
</article>

<script define:vars={{ slug }}>
	(async () => {
		const response = await fetch(`/api/views?slug=${slug}`, { method: "POST" });
		if (!response.ok) return;
		const views = await response.text();
		const $views = document.getElementById("views");
		if (isNaN(parseInt(views, 10))) return;
		if ($views) $views.textContent = views;
	})();
</script>