"use client";

import { useEffect } from "react";

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

  return (
    <main className="flex min-h-screen items-center justify-center p-6">
      <div className="max-w-md rounded-lg border border-red-200 bg-red-50 p-8 text-center">
        <h1 className="mb-4 text-xl font-semibold text-red-700">
          Something went wrong
        </h1>
        <p className="mb-6 text-sm text-red-600">
          An unexpected error occurred. Please try refreshing the page.
        </p>
        <button
          type="button"
          onClick={reset}
          className="rounded bg-red-600 px-4 py-2 text-white transition hover:bg-red-700"
        >
          Refresh
        </button>
      </div>
    </main>
  );
}