"use client";

import { useEffect } from "react";

export const Error = ({
	statusCode,
	title,
	description,
}: {
	statusCode: number;
	title: string;
	description?: string;
}) => {
	return (
		<div className="flex-1 flex items-center justify-center h-full">
			<div className="rounded-2xl bg-base-300 p-8 text-center max-w-md w-full">
				<h1 className="text-6xl font-bold text-red-500">{statusCode}</h1>
				<p className="text-xl font-semibold mt-4">
					{title ? title : "Oh nein! Ein Fehler ist aufgetreten."}
				</p>
				<p className="text-gray-600 mt-2">
					{description || "Ein unerwarteter Fehler ist aufgetreten."}
				</p>
				<button onClick={() => window.location.reload()} className="btn btn-dash my-2">
					Refresh Page
				</button>
			</div>
		</div>
	);
};

export const ErrorFallback = ({
	error,
	reset,
}: {
	error: Error & { digest?: string };
	reset: () => void;
}) => {
	useEffect(() => {
		// Log the error to an error reporting service
		console.error(error);
	}, [error]);

	return (
		<div>
			<h2>Something went wrong!</h2>
			<button
				onClick={
					// Attempt to recover by trying to re-render the segment
					() => reset()
				}
			>
				Try again
			</button>
		</div>
	);
};