"use client";

type EntriesDiscardModalProps = {
    isOpen: boolean;
    onConfirm: () => void;
    onCancel: () => void;
};

export default function EntriesDiscardModal({ isOpen, onConfirm, onCancel }: EntriesDiscardModalProps) {
    if (!isOpen) return null;

    return (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4">
            <div
                className="w-full max-w-sm rounded-2xl border border-accent-weak bg-panel p-5 shadow-xl"
                onKeyDown={event => {
                    if (event.key === "Escape") onCancel();
                }}
                role="dialog"
                tabIndex={-1}
            >
                <div className="text-lg font-semibold">Discard changes?</div>
                <p className="mt-2 text-sm text-muted">You have unsaved changes. Do you want to discard them?</p>
                <div className="mt-4 flex items-center gap-2">
                    <button
                        type="button"
                        className="flex-1 rounded-lg btn-outline-accent px-3 py-2 text-sm font-semibold"
                        onClick={onCancel}
                    >
                        Keep editing
                    </button>
                    <button
                        type="button"
                        className="flex-1 rounded-lg border border-red-400/60 bg-red-500/10 px-3 py-2 text-sm font-semibold text-red-200"
                        onClick={onConfirm}
                    >
                        Discard
                    </button>
                </div>
            </div>
        </div>
    );
}