---

import type { CollectionEntry } from "astro:content";

import { render } from "astro:content";

import { getImage } from "astro:assets";

import BaseLayout from "./Base.astro";

import BlogHero from "@/components/blog/Hero.astro";

interface Props {

	post: CollectionEntry<"post">;

}

const { post } = Astro.props;

const {

	data: { title, description, ogImage, publishDate, atUri },

} = post;

let socialImage: string;

if (!ogImage) {

	socialImage = "/social-card.png";

} else if (typeof ogImage === "string") {

	socialImage = ogImage;

} else {

	const optimized = await getImage({

		src: ogImage,

		format: "png",

		width: 1200,

	});

	socialImage = optimized.src;

}

const articleDate = publishDate.toISOString();

const { headings } = await render(post);

---

<script>

	const scrollBtn = document.getElementById("to-top-btn") as HTMLButtonElement;

	const targetHeader = document.getElementById("blog-hero") as HTMLDivElement;

	function callback(entries: IntersectionObserverEntry[]) {

		entries.forEach((entry) => {

			// only show the scroll to top button when the heading is out of view

			scrollBtn.dataset.show = (!entry.isIntersecting).toString();

		});

	}

	scrollBtn.addEventListener("click", () => {

		document.documentElement.scrollTo({ top: 0, behavior: "smooth" });

	});

	const observer = new IntersectionObserver(callback);

	observer.observe(targetHeader);

</script>

<BaseLayout meta={{ title, description, articleDate, ogImage: socialImage, atUri }}>

	<div class="gap-x-10 lg:flex lg:items-start">

		{

			!!headings.length && (

				<aside class="sticky top-20 order-2 -mr-32 hidden basis-64 lg:block">

					<h2 class="font-semibold">Table of Contents</h2>

					<ul class="mt-4 text-xs">

						{headings.map(({ depth, slug, text }) => (

							<li class="line-clamp-2 hover:text-accent">

								<a

									class={`block ${depth <= 2 ? "mt-3" : "mt-2 pl-3 text-[0.6875rem]"}`}

									href={`#${slug}`}

									aria-label={`Scroll to section: ${text}`}

								>

									<span>{"#".repeat(depth)}</span> {text}

								</a>

							</li>

						))}

					</ul>

				</aside>

			)

		}

		<article class="flex-grow break-words">

			<div id="blog-hero"><BlogHero content={post} /></div>

			<div

				class="prose prose-sm prose-cactus mt-12 prose-headings:font-semibold prose-headings:before:absolute prose-headings:before:-ml-4 prose-headings:before:text-accent prose-headings:before:content-['#'] prose-th:before:content-none"

			>

				<slot />

			</div>

		</article>

	</div>

	<button

		id="to-top-btn"

		class="z-90 fixed bottom-8 right-4 flex h-10 w-10 translate-y-28 items-center justify-center rounded-full border-2 border-transparent bg-zinc-900 text-3xl opacity-0 transition-all duration-300 hover:border-zinc-400 data-[show=true]:translate-y-0 data-[show=true]:opacity-100 dark:bg-zinc-700 sm:right-8 sm:h-12 sm:w-12"

		aria-label="Back to Top"

		data-show="false"

		><svg

			xmlns="http://www.w3.org/2000/svg"

			aria-hidden="true"

			focusable="false"

			fill="none"

			viewBox="0 0 24 24"

			stroke-width="2"

			stroke="currentColor"

			class="h-6 w-6"

		>

			<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5"></path>

		</svg>

	</button>

</BaseLayout>