// EditorModeToggle.jsx
// Custom KendoReact component for switching between HTML and Markdown editing modes
// Demonstrates reusable UI components and state management patterns
import React from 'react';
import { Button } from '@progress/kendo-react-buttons';

function EditorModeToggle({ editMode, onToggle }) {
    return (
        // Toggle button positioned above the editor with consistent styling
        <div style={{
            display: 'flex',
            justifyContent: 'flex-end',
            marginBottom: '8px'
        }}>
            <Button
                onClick={onToggle}
                size="small"
                icon={editMode === 'html' ? 'code' : 'edit'}
            >
                {editMode === 'html' ? 'Switch to Markdown' : 'Switch to HTML'}
            </Button>
        </div>
    );
}

export default EditorModeToggle;