"use client";

import { AlertTriangle, Home, RefreshCw } from "lucide-react";
import Link from "next/link";
import { useEffect } from "react";
import { Button } from "@/components/ui/button";

// biome-ignore lint/suspicious/noShadowRestrictedNames: correct use
export default function Error({
	error,
	reset,
}: {
	error: Error & { digest?: string };
	reset: () => void;
}) {
	useEffect(() => {
		console.error(error);
	}, [error]);

	return (
		<div className="min-h-screen flex flex-col items-center justify-center bg-zinc-50 dark:bg-zinc-950 px-4">
			<div className="text-center space-y-6 max-w-md">
				<div className="flex justify-center">
					<div className="bg-orange-100 dark:bg-orange-900/30 p-4 rounded-full">
						<AlertTriangle className="h-12 w-12 text-orange-600 dark:text-orange-400" />
					</div>
				</div>
				<h1 className="text-4xl font-bold tracking-tight">
					Oups ! Une erreur est survenue
				</h1>
				<p className="text-muted-foreground text-lg">
					La chèvre a glissé sur une peau de banane. Nous essayons de la remettre sur
					pied.
				</p>
				<div className="flex flex-col sm:flex-row gap-3 justify-center">
					<Button onClick={reset} size="lg" className="gap-2">
						<RefreshCw className="h-4 w-4" />
						Réessayer
					</Button>
					<Button asChild variant="outline" size="lg" className="gap-2">
						<Link href="/">
							<Home className="h-4 w-4" />
							Retourner à l'accueil
						</Link>
					</Button>
				</div>
			</div>
		</div>
	);
}