'use client';

import { useEffect } from 'react';

export default function Error({
    error,
    reset,
}: {
    error: Error & { digest?: string };
    reset: () => void;
}) {
    useEffect(() => {
        // Log the error to an error reporting service
        console.error(error);
    }, [error]);

    return (
        <div className="flex min-h-screen flex-col items-center justify-center gap-4 p-4 text-center">
            <h2 className="text-xl font-semibold">Something went wrong!</h2>
            <p className="text-gray-500">{error.message || 'An unexpected error occurred'}</p>
            <button
                className="rounded bg-blue-500 px-4 py-2 text-white transition-colors hover:bg-blue-600"
                onClick={
                    // Attempt to recover by trying to re-render the segment
                    () => reset()
                }
            >
                Try again
            </button>
        </div>
    );
}
