import { Button } from "~/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "~/components/ui/card";
import { ChevronLeft, FileQuestion, RotateCw } from "lucide-react";
import { Link } from "react-router";
import { forceReload } from "~/lib/utils";

export default function Error({
  title = "Page introuvable",
  message = "Nous n'avons pas pu trouver la page que vous recherchiez.",
  code = 404,
  description = "La page que vous recherchez a peut-être été supprimée, son nom a été modifié ou est temporairement indisponible.",
}) {
  return (
    <div className="flex items-center justify-center h-full w-full">
      <Card className="max-w-md w-full">
        <CardHeader className="text-center">
          <div className="flex justify-center mb-4">
            <FileQuestion className="h-12 w-12 text-primary" />
          </div>
          <CardTitle className="text-2xl">{title}</CardTitle>
          <CardDescription>{message}</CardDescription>
        </CardHeader>
        <CardContent className="text-center">
          <p className="text-4xl font-bold mb-2">{code}</p>
          <p className="text-muted-foreground">{description}</p>
        </CardContent>
        <CardFooter className="flex justify-center gap-2">
          <Button>
            <ChevronLeft />
            <Link to="/">Retour</Link>
          </Button>
          <Button variant="destructive" className="text-white" onClick={forceReload}>
            <RotateCw />
            Recharger la page
          </Button>
        </CardFooter>
      </Card>
    </div>
  );
}