import Link from "@/components/link";
import type { HousekeepingSurface } from "../contracts";
import type { HousekeepingRecentItem } from "../recent/recent-work";
import { toHousekeepingHref } from "../routing/href";

export interface RecentWorkLabels {
	readonly title: string;
	readonly empty: string;
}

export function RecentWork({
	items,
	labels,
	surface,
	titles = {},
}: {
	readonly items: readonly HousekeepingRecentItem[];
	readonly labels: RecentWorkLabels;
	readonly surface: HousekeepingSurface;
	readonly titles?: Readonly<Record<string, string>>;
}) {
	return (
		<section
			aria-labelledby="housekeeping-recent-title"
			className="min-w-0 space-y-3"
		>
			<h2 id="housekeeping-recent-title" className="text-lg font-semibold">
				{labels.title}
			</h2>
			{items.length === 0 ? <p>{labels.empty}</p> : null}
			<ul className="space-y-2">
				{items.map((item) => (
					<li
						key={item.routeId}
						className="min-w-0 rounded-md border border-[var(--admin-border)] bg-[var(--admin-surface)] p-3"
					>
						<Link
							href={toHousekeepingHref(item.canonicalHref, surface)}
							className="break-words rounded focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--admin-accent)]"
						>
							{titles[item.labelKey] ?? item.routeId}
						</Link>
						<div className="text-xs text-[var(--admin-text-muted)]">
							<span>{item.source}</span>
							{" · "}
							<time dateTime={item.occurredAt}>{item.occurredAt}</time>
						</div>
					</li>
				))}
			</ul>
		</section>
	);
}