import { ThemeProvider } from "@/context/ThemeContext";
import { AlertCircle } from "lucide-react";
import { useTranslations } from "next-intl";
import { ReactNode } from "react";
import BackButton from "./BackButton";
import HomeButton from "./HomeButton";

type ErrorPageLayoutProps = {
	children: ReactNode;
	errorCode?: number;
	errorMessage?: string;
};

export default function ErrorPageLayout({
	children,
	errorCode,
	errorMessage,
}: ErrorPageLayoutProps) {
	const t = useTranslations("Error");
	return (
		<ThemeProvider>
			<div className="min-h-screen flex flex-col items-center justify-center bg-slate-100 dark:bg-gray-900 text-gray-900 dark:text-white">
				<div className="flex flex-col items-center p-8">
					<AlertCircle className="h-16 w-16 text-red-600 mb-4" />
					<h1 className="text-5xl font-bold mb-4">
						{errorCode || t("defaultErrorCode")}
					</h1>
					<p className="text-xl mb-6">
						{errorMessage || t("defaultErrorMessage")}
					</p>
					<div className="row space-x-4">
						<HomeButton label={t("backToHome")} />

						<BackButton label={t("back")} />
					</div>
				</div>
				<div className="mt-4">{children}</div>
			</div>
		</ThemeProvider>
	);
}
