"use client";

import { useEffect } from "react";

import { Button } from "@/components/ui/button";
import { ErrorBanner } from "@/components/ui/error-banner";

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    console.error(error);
  }, [error]);

  return (
    <div className="flex min-h-[60vh] flex-col items-center justify-center px-4 text-center">
      <ErrorBanner title="Something went wrong on this page">
        The krypco network is fine — this is a website glitch. Tap try again, or
        refresh the whole page if it keeps failing.
      </ErrorBanner>
      <Button type="button" onClick={reset} className="mt-6 min-h-11 px-6">
        Try again
      </Button>
    </div>
  );
}