---
import { type CollectionEntry, render } from "astro:content";
import FormattedDate from "@/components/FormattedDate.astro";
import type { HTMLTag, Polymorphic } from "astro/types";
import GiscusComment from "@/components/componentsBefore/GiscusComment";
import ArticleContainer from "../ArticleContainer.astro";
import ShareButtons from "../ShareButtons.astro";
type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }> & {
	note: CollectionEntry<"note">;
	isPreview?: boolean | undefined;
	index?: number;
};

const { as: Tag = "div", note, isPreview = false, index } = Astro.props;
const { Content } = await render(note);
const dateTimeOptions: Intl.DateTimeFormatOptions = note.data.date_created
	? {
			hour: "2-digit",
			minute: "2-digit",
			year: "2-digit",
			month: "2-digit",
			day: "2-digit",
		}
	: {
			year: "2-digit",
			month: "2-digit",
			day: "2-digit",
		};

const date = note.data.date_created ?? note.data.date;
let modifiedDate = note.data?.date_modified;
if (modifiedDate && modifiedDate.toDateString() === date.toDateString()) {
	modifiedDate = undefined;
}
---

<ArticleContainer
	className={isPreview &&
		"inline-grid w-full rounded-md bg-[rgb(240,240,240)] px-4 py-3 dark:bg-[rgb(33,35,38)]"}
	dataPagefindBody={isPreview ? false : true}
>
	<Tag class="title" class:list={{ "text-base": isPreview }}>
		{
			isPreview ? (
				<>
					{index ? `${index + 1}.` : ""}
					<a class="cactus-link" href={`/notes/${note.id}/`}>
						{note.data.title}
					</a>
				</>
			) : (
				<>{note.data.title}</>
			)
		}
	</Tag>
	<div>
		<FormattedDate dateTimeOptions={dateTimeOptions} date={date} />
		{
			modifiedDate && (
				<span class="bg-quote/5 text-quote rounded-lg px-2 py-1">
					Updated:
					<FormattedDate class="ms-1" date={modifiedDate} dateTimeOptions={dateTimeOptions} />
				</span>
			)
		}
	</div>
	<div class="group w-full overflow-auto">
		<div class="prose prose-base prose-cactus mt-4 max-w-none [&>p:last-of-type]:mb-0">
			<Content />
		</div>
	</div>

	{!isPreview && <GiscusComment client:load />}
	{
		!isPreview && (
			<div class="mt-8 border-t pt-4">
				<ShareButtons />
			</div>
		)
	}
</ArticleContainer>