import React, { useState, useRef } from 'react'

    export const AudioRecorder= () => {
        const [isRecording, setIsRecording] = useState(false)
        const [audioURL, setAudioURL] = useState<string | null>(null)
        const mediaRecorderRef = useRef<MediaRecorder | null>(null)
        const audioChunks = useRef<Blob[]>([])
    
        const startRecording = async () => {
            const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
            const mediaRecorder = new MediaRecorder(stream)
            mediaRecorderRef.current = mediaRecorder
        
            mediaRecorder.ondataavailable = (event) => {
                audioChunks.current.push(event.data)
            }
        
            mediaRecorder.onstop = () => {
                const audioBlob = new Blob(audioChunks.current, { type: "audio/wav" })
                const url = URL.createObjectURL(audioBlob)
                setAudioURL(url)
                audioChunks.current = []
            }

            mediaRecorder.start()
            setIsRecording(true)
        
        }
    
        const stopRecording = () => {
            mediaRecorderRef.current?.stop()
           setIsRecording(false)
        }
    }