import { escapeHtml } from "../lib/html.ts";
import { t } from "../lib/i18n/index.ts";
import { type LayoutOptions, layout } from "./layout.ts";
import { primaryButtonClass, THEME } from "./theme/index.ts";

export function notFoundPage(
	message: string,
	options: LayoutOptions = {},
): string {
	const locale = options.locale ?? "en";
	const msg = t(locale);

	const body = `<div class="max-w-xl mx-auto text-center py-16">
		<div class="text-6xl font-bold ${THEME.textMuted} mb-4">404</div>
		<h1 class="text-2xl font-bold ${THEME.text} mb-3">${escapeHtml(msg.notFound.heading)}</h1>
		<p class="${THEME.textSecondary} mb-8">${escapeHtml(message)}</p>
		<a href="/" class="${primaryButtonClass} inline-block">${escapeHtml(msg.notFound.backHome)}</a>
	</div>`;

	return layout(msg.notFound.heading, body, { ...options, noindex: true });
}