'use client';

import Image from 'next/image';
import { useRouter } from 'next/navigation';

export function ErrorView({
    title,
    descriptionPrimary,
    descriptionSecondary,
    onRetry,
}: {
    title: string;
    descriptionPrimary: string;
    descriptionSecondary?: string;
    onRetry?: () => void;
}) {
    const router = useRouter();

    return (
        <div className="relative min-h-screen h-full w-full overflow-hidden">
            <Image
                src="/assets/Onboarding/Ornamen.jpg"
                alt="Error background"
                fill
                priority
                className="object-cover"
            />

            <div className="absolute inset-0 bg-white/80" />

            <div className="relative z-10 flex min-h-screen items-center justify-center">
                <div className="w-full rounded-2xl p-8 text-center">
                    <div className="flex flex-col gap-5 items-center">
                        <h1 className="text-[200px] font-semibold text-gray-900 text-center">
                            {title}
                        </h1>

                        <p className="text-5xl text-gray-700 font-bold">
                            {descriptionPrimary}
                        </p>

                        {descriptionSecondary && (
                            <p className="text-lg text-gray-500">
                                {descriptionSecondary}
                            </p>
                        )}

                        <div className="mt-8 flex flex-col gap-3 w-full max-w-md">
                            {onRetry && (
                                <button
                                    onClick={onRetry}
                                    className="w-full rounded-lg border border-green-600 px-4 py-2 text-green-600 transition hover:bg-green-50"
                                >
                                    Try Again
                                </button>
                            )}

                            <button
                                onClick={() => router.back()}
                                className="w-full rounded-lg bg-green-600 px-4 py-2 text-white transition hover:bg-green-700 cursor-pointer"
                            >
                                GO BACK
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}