"use client";
import { Error as ErrorComp } from "_components/Error";
import { ErrorBoundary } from "react-error-boundary";
import { NextPage } from "next";

const AuthLayout: NextPage<
	Readonly<{
		children: React.ReactNode;
	}>
> = ({ children }) => (
	<div
		className="hero min-h-screen"
		style={{
			backgroundImage:
				"url(https://img.daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.webp)",
		}}
	>
		<div className="hero-overlay bg-neutral/60"></div>
		<div className="hero-content text-center ">
			<ErrorBoundary
				fallbackRender={({ error, resetErrorBoundary }) => {
					console.log(error);
					let errorTest;
					let errorCode = 500;
					if ("statusCode" in error) {
						errorCode = error.statusCode;
					}
					if ("message" in error || error instanceof Error) {
						errorTest = error.message;
					} else if (typeof error === "string") {
						errorTest = error;
					} else {
						errorTest = "Ein unerwarteter Fehler ist aufgetreten.";
					}
					return <ErrorComp title={errorTest} statusCode={errorCode} />;
				}}
			>
				<div className="max-w-lg">
					<div className="card rounded-2xl bg-base-100 w-full min-w-[500px] shadow-2xl max-md:min-w-[400px]">
						{children}
					</div>
				</div>
			</ErrorBoundary>
		</div>
	</div>
);

export default AuthLayout;