'use client';
import { AppStore } from '@/lib/store';
import { useRouter } from 'next/navigation';
import { useEffect } from 'react';
import { useSelector } from 'react-redux';

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

    const userDetails: any = useSelector((state: AppStore) => state.userDetailSlice?.userDetails);

    const router = useRouter();
    useEffect(() => {
        console.error('Client-side error:', error);
    }, [error]);

    const redirectToHome = () => {
        router.push(`/${userDetails?.role}/dashboard`);
        setTimeout(() => {
            window.location.reload();
        }, 100);
    };

    return (
        <html lang="en">
            <body style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100vh' }}>
                <div style={{ textAlign: 'center' }}>
                    <h2>Oops! Something went wrong!</h2>
                    <p>Please refresh the page or try again later.</p>
                    <button
                        onClick={redirectToHome}
                        style={{
                            padding: '10px 15px',
                            cursor: 'pointer',
                            backgroundColor: '#8c52ff',
                            color: '#fff',
                            border: 'none',
                            borderRadius: '8px',
                            marginTop: '20px',
                            fontSize: '16px',
                        }}
                    >
                        Back to Dashboard
                    </button>
                </div>
            </body>
        </html>
    );
}
