import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';

interface Props {
    isOpen: boolean;
    onClose: () => void;
    onSaveAndContinue: () => void;
    onContinueWithoutSaving: () => void;
}

export function UnsavedChangesDialog({
    isOpen,
    onClose,
    onSaveAndContinue,
    onContinueWithoutSaving,
}: Props) {
    return (
        <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
            <DialogContent>
                <DialogHeader>
                    <DialogTitle>Cambios sin guardar</DialogTitle>
                    <DialogDescription>
                        Tienes cambios sin guardar en esta sección. ¿Qué deseas
                        hacer?
                    </DialogDescription>
                </DialogHeader>
                <DialogFooter className="gap-2">
                    <Button variant="ghost" onClick={onClose}>
                        Cancelar
                    </Button>
                    <Button variant="outline" onClick={onContinueWithoutSaving}>
                        Continuar sin guardar
                    </Button>
                    <Button onClick={onSaveAndContinue}>
                        Guardar y continuar
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}