import React, { useRef, useState } from "react";

const SingleAudioPlayer = ({ src }) => {
  const audioRef = useRef(null);
  const [isPlaying, setIsPlaying] = useState(false);

  const togglePlay = () => {
    const audio = audioRef.current;
    if (!audio) return;

    if (isPlaying) {
      audio.pause();
    } else {
      audio.play().catch((e) => {
        console.warn("Playback error:", e);
      });
    }

    setIsPlaying(!isPlaying);
  };

  const handleEnded = () => {
    setIsPlaying(false);
  };

  return (
    <div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
      <button onClick={togglePlay}>{isPlaying ? "Pause" : "Play"}</button>
      <span>{src.split("/").pop()}</span>
      <audio ref={audioRef} src={src} onEnded={handleEnded} />
    </div>
  );
};

export default SingleAudioPlayer;