import { MissingFile } from "~/components/svgs";
import { useTranslation } from "~/providers/I18nProvider";

export const DocNotFoundPage = () => {
	const { t } = useTranslation();
	return (
		<div className="flex min-h-[60vh] w-full items-center justify-center">
			<div className="max-w-lg space-y-5 rounded-xl border bg-white p-10 text-center shadow-lg">
				<MissingFile className="mx-auto mb-4 size-32 fill-indigo-600" />
				<h1 className="mb-2 font-extrabold text-3xl text-indigo-600">
					{t.doc_not_found.titolo}
				</h1>
				<p className="text-muted-foreground">{t.doc_not_found.sottotitolo}</p>
				<p className="text-muted-foreground">{t.doc_not_found.CTA}</p>
			</div>
		</div>
	);
};