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

interface AudioPlayerProps {
  urlAudio: string;
  fileName: string;
}

const AudioPlayer: React.FC<AudioPlayerProps> = ({ urlAudio, fileName }) => {
  const audioRef = useRef<HTMLAudioElement>(null);
  const [currentTime, setCurrentTime] = useState(0);

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

    const updateTime = () => {
      setCurrentTime(audio?.currentTime);
    };

    audio.addEventListener("timeupdate", updateTime);
    return () => {
      audio.removeEventListener("timeupdate", updateTime);
    };
  }, []);

  return (
    <div className="mt-2">
      <h2 className="text-lg font-semibold">{fileName}</h2>
      {/* <a href={urlAudio} target="_blank">{urlAudio}</a> */}
      <audio ref={audioRef} src={urlAudio} controls className="mt-1 w-full" />
      {/* <div className="mt-2 space-x-2">
        <button onClick={playAudio}>▶️ Play</button>
        <button onClick={pauseAudio}>⏸️ Pause</button>
        <button onClick={stopAudio}>⏹️ Stop</button>
      </div>
      <div className="mt-1 text-sm text-gray-500">{formatTime(currentTime)}</div> */}
    </div>
  );
};

export default AudioPlayer;