import React from 'react';
import { useAudioRecorder } from '../hooks/useAudioRecorder';

export const AudioControls: React.FC = () => {
    const { isRecording, audioURL, startRecording, stopRecording, playRecording } = useAudioRecorder();

    return (
        <div className="audio-controls">
            {!isRecording ? (
                <button
                    onClick={startRecording}
                    className="record-button"
                >
                    🎤 Démarrer l'enregistrement
                </button>
            ) : (
                <button
                    onClick={stopRecording}
                    className="stop-button"
                >
                    ⏹️ Arrêter l'enregistrement
                </button>
            )}

            {audioURL && (
                <button
                    onClick={playRecording}
                    className="play-button"
                >
                    ▶️ Écouter l'enregistrement
                </button>
            )}
        </div>
    );
};