"use client";

import { useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Page } from "@/components/ui/card";
import { ErrorState } from "@/components/ui/states";
import { routes } from "@/lib/routes";

export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
  useEffect(() => {
    console.error(error);
  }, [error]);
  return (
    <main id="main">
      <Page className="py-12">
        <ErrorState
          title="Something went wrong rendering this page"
          description="The error has been logged. You can retry, or go back to the index."
          detail={error.digest}
          action={
            <div className="flex gap-2">
              <Button variant="primary" onClick={() => reset()}>
                Retry
              </Button>
              <Button href={routes.home()}>Home</Button>
            </div>
          }
        />
      </Page>
    </main>
  );
}