import type { Select } from "corvos";

import type site from "@/corvos.config.ts";

import { CardBody } from "$/ui/objects/CardBody.tsx";
import { Heading } from "$/ui/objects/Heading.tsx";

import { Card, type Props as CardProps } from "../objects/Card.tsx";

export type Props = CardProps<"a"> & {
	"heading-level": "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
	"page": Select<typeof site, ".html", { type: "release" }>;
};

export const ReleaseCard = ({ "heading-level": headingLevel, page, ...props }: Props) => {
	const time = (
		<li class="l-hlist__item">
			<time class="dt-published" datetime={page.data.date.toISOString()}>
				{page.data.date.toLocaleDateString(undefined, {
					day: "numeric",
					month: "short",
					year: "numeric",
				})}
			</time>
		</li>
	);

	return (
		<Card
			as="a"
			class="c-with-visited-indicator h-entry u-url"
			horizontal
			href={page.url}
			{...props}
		>
			<CardBody class="c-with-visited-indicator__indicator u-pie-0" />

			<CardBody main>
				<Heading as={headingLevel} class="p-name">
					<span class="u-mie-100">{page.data.title}</span>
				</Heading>

				<small class="u-c-mute u-d-none@sm-hi">
					<ul class="l-hlist l-hlist--separated">{time}</ul>
				</small>
			</CardBody>

			<CardBody as="small" class="u-c-mute u-d-none@sm-lo">
				<ul class="l-hlist l-hlist--separated">{time}</ul>
			</CardBody>
		</Card>
	);
};