import { Button } from "@mui/material";
import React from "react";
import ReactAudioPlayer from "react-audio-player";
import ReactPlayer from "react-player";
import { useNavigate } from "react-router-dom";
import audioUrl from "./jhan.mp3";
const AudioPlayer = ({ imgSrc, audioSrc }) => {
  const [status, setStatus] = React.useState({
    isPlaying: false,
    isLoop: false,
    isLoaded: false,
    error: false,
  });
  const audioRef = React.useRef(null);

  const toggleAudio = () =>
    status.isLoaded
      ? status.isPlaying
        ? audioRef.current.pause()
        : audioRef.current.play()
      : console.log("Audio has not loaded yet.");
  return (
    <li>
      <img src={imgSrc} onClick={toggleAudio} />
      {/* <audio controls> */}
      <audio
        controls
        ref={audioRef}
        src={audioSrc}
        type="audio/mpeg"
        onLoad={() => {
          console.log("LOADED");
          setStatus({ ...status, isLoaded: true });
        }}
        onPlay={() => setStatus({ ...status, isPlaying: true })}
        onPause={() => setStatus({ ...status, isPlaying: false })}
        onError={() => setStatus({ ...status, error: true })}
      >
        Your browser does not support the
        <code>audio</code> element.
      </audio>
    </li>
  );
};

export default AudioPlayer;
