ui/src/components/AnnotationControls.js

import React from 'react';

function AnnotationControls({ onFrameBackward, onPlayPause, isPlaying, onFrameForward, onSaveAnnotation, onDelete }) {
    return (
        <div style={{
            display: 'flex',
            justifyContent: 'center',
            position: 'relative',
            zIndex: 1,
            padding: '10px',
            background: '#f5f5f5',
            borderRadius: '4px',
            marginTop: '10px'
        }}>
            <button
                style={{
                    padding: '10px 20px',
                    fontSize: '16px',
                    margin: '0 5px',
                    background: '#e0e0e0',
                    border: '1px solid #ccc',
                    borderRadius: '4px',
                    cursor: 'pointer'
                }}
                onClick={onFrameBackward}
                title="Previous Frame"
            >
                ⏮️
            </button>
            <button
                style={{
                    padding: '10px 20px',
                    fontSize: '16px',
                    margin: '0 5px',
                    background: isPlaying ? '#ff8a8a' : '#8aff8a',
                    border: '1px solid #ccc',
                    borderRadius: '4px',
                    cursor: 'pointer'
                }}
                onClick={onPlayPause}
            >
                {isPlaying ? '⏸️ Pause' : '▶️ Play'}
            </button>
            <button
                style={{
                    padding: '10px 20px',
                    fontSize: '16px',
                    margin: '0 5px',
                    background: '#e0e0e0',
                    border: '1px solid #ccc',
                    borderRadius: '4px',
                    cursor: 'pointer'
                }}
                onClick={onFrameForward}
                title="Next Frame"
            >
                ⏭️
            </button>
            <button
                style={{
                    padding: '10px 20px',
                    fontSize: '16px',
                    margin: '0 5px',
                    background: '#8ad4ff',
                    border: '1px solid #ccc',
                    borderRadius: '4px',
                    cursor: 'pointer'
                }}
                onClick={onSaveAnnotation}
            >
                💾 Save
            </button>
            <button
                style={{
                    padding: '10px 20px',
                    fontSize: '16px',
                    margin: '0 5px',
                    background: '#ffb38a',
                    border: '1px solid #ccc',
                    borderRadius: '4px',
                    cursor: 'pointer'
                }}
                onClick={onDelete}
            >
                🗑️ Delete
            </button>
        </div>
    );
}

export default AnnotationControls;