"use client";

import { useRouter } from "next/navigation";

interface ErrorFallbackProps {
    title?: string;
    message?: string;
    onRetry?: () => void;
}

export default function ErrorFallback({
    title = "Connection Lost",
    message = "We are having trouble connecting to our server right now. Our team is working on it, please try again in a few moments.",
    onRetry
}: ErrorFallbackProps) {
    const router = useRouter();

    const handleRetry = () => {
        if (onRetry) {
            onRetry();
        } else {
            window.location.reload();
        }
    };

    return (
        <div className="flex flex-col items-center justify-center min-h-[60vh] px-4 mt-10 text-center font-outfit">
            <div className="bg-[#053F31]/5 p-8 md:p-12 rounded-[24px] border border-[#053F31]/10 max-w-lg w-full backdrop-blur-sm">
                <div className="mb-6 flex justify-center text-[#053F31]">
                    <svg width="64" height="64" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" fill="#053F31" fillOpacity="0.1" stroke="#053F31" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                        <path d="M12 8V12" stroke="#053F31" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                        <path d="M12 16H12.01" stroke="#053F31" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                </div>

                <h2 className="text-2xl md:text-3xl font-lexend font-medium text-[#053F31] mb-4">
                    {title}
                </h2>
                <p className="text-[#374151] font-light leading-relaxed mb-10">
                    {message}
                </p>

                <div className="flex flex-col sm:flex-row gap-4 justify-center mt-6">
                    <button
                        onClick={handleRetry}
                        className="bg-[#053F31] text-white px-8 py-3 rounded-full font-medium transition-all hover:bg-[#085241] hover:shadow-lg active:scale-95"
                    >
                        Try Again
                    </button>
                    <button
                        onClick={() => router.push("/")}
                        className="bg-white text-[#053F31] border-2 border-[#053F31] px-8 py-3 rounded-full font-medium transition-all hover:bg-[#053F31]/5 active:scale-95"
                    >
                        Go Home
                    </button>
                </div>
            </div>
        </div>
    );
}