// CancelModal.jsx
// Confirmation modal for canceling post editing
import React from 'react';
import { Dialog, DialogActionsBar } from '@progress/kendo-react-dialogs';
import { Button } from '@progress/kendo-react-buttons';

const CancelModal = ({ isVisible, onClose, onConfirm, hasUnsavedChanges }) => {
    if (!isVisible) return null;
    
    return (
            <Dialog
                title="Cancel Editing"
                onClose={onClose}
                minWidth={400}
                width={500}
                style={{ borderRadius: '8px' }}
            >
            <div style={{ padding: '20px' }}>
                {hasUnsavedChanges ? (
                    <>
                        <p style={{ margin: '0 0 16px 0', fontSize: '16px' }}>
                            You have unsaved changes.
                        </p>
                        <p style={{ margin: '0', fontSize: '14px', color: '#666' }}>
                            Are you sure you want to cancel? All unsaved changes will be lost.
                        </p>
                    </>
                ) : (
                    <p style={{ margin: '0', fontSize: '16px' }}>
                        Are you sure you want to cancel editing?
                    </p>
                )}
            </div>
            <DialogActionsBar>
                <Button onClick={onClose}>
                    Continue Editing
                </Button>
                <Button 
                    onClick={onConfirm} 
                    themeColor="primary"
                    look="outline"
                >
                    {hasUnsavedChanges ? 'Discard Changes' : 'Cancel'}
                </Button>
            </DialogActionsBar>
        </Dialog>
    );
};

export default CancelModal;
