export default function Record(props) {
  let mediaRecorder = null; // mediaRecorder instance

  const startRecording = () => {
    navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => {
      mediaRecorder = new MediaRecorder(stream);
      mediaRecorder.start();
      props.onRecord(true);
    });
  };

  const stopRecording = () => {
    if (mediaRecorder) {
      mediaRecorder.stop();
      props.onRecord(false);
    }
  };

  return (
    <div className="flex flex-col justify-center h-screen">
      <div className="text-center py-6 mt-10">
        <h1 className="text-5xl font-bold text-blue-500">Reflector</h1>
        <p className="text-gray-500">Capture The Signal, Not The Noise</p>
      </div>

      <div className="flex flex-col items-center justify-center flex-grow -mt-10">
        {!props.isRecording ? (
          <button
            onClick={startRecording}
            className="px-4 py-2 mb-4 text-2xl font-bold text-white bg-blue-500 rounded"
          >
            Record
          </button>
        ) : (
          <button
            onClick={stopRecording}
            className="px-4 py-2 mb-4 text-2xl font-bold text-red-500 rounded"
          >
            Stop
          </button>
        )}
      </div>
    </div>
  );
}