// PublishModal.jsx
// Confirmation modal for publishing posts
import React from 'react';
import { Dialog, DialogActionsBar } from '@progress/kendo-react-dialogs';
import { Button } from '@progress/kendo-react-buttons';

const PublishModal = ({ isVisible, onClose, onConfirm, postTitle }) => {
    if (!isVisible) return null;
    
    return (
            <Dialog
                title="Publish Post"
                onClose={onClose}
                minWidth={400}
                width={500}
                style={{ borderRadius: '8px' }}
            >
            <div style={{ padding: '20px' }}>
                <p style={{ margin: '0 0 16px 0', fontSize: '16px' }}>
                    Are you sure you want to publish this post?
                </p>
                {postTitle && (
                    <p style={{ 
                        margin: '0 0 16px 0', 
                        fontSize: '14px', 
                        fontStyle: 'italic',
                        color: '#666'
                    }}>
                        "{postTitle}"
                    </p>
                )}
                <p style={{ margin: '0', fontSize: '14px', color: '#666' }}>
                    This will make the post visible to your readers.
                </p>
            </div>
            <DialogActionsBar>
                <Button onClick={onClose}>
                    Cancel
                </Button>
                <Button 
                    onClick={onConfirm} 
                    themeColor="primary"
                >
                    Publish Post
                </Button>
            </DialogActionsBar>
        </Dialog>
    );
};

export default PublishModal;
