'use client'

import Image from "next/image";
import { useEffect, useRef, useState } from "react";

export const MusicTab = () => {
  const [audio, setAudio] = useState<HTMLAudioElement | null>(null);
  const [isPlay, SetPlay] = useState(false);

  useEffect(() => {
    if (typeof Audio !== undefined) {
      setAudio(new Audio("/music/shedontluvyou.mp3"))
    }
    if (audio) {
    }
    return () => {
      if (audio) {
        audio.pause();
      }
    }
  }, [])

  const toggleAudio = () => {
    if (!audio) return
    audio.volume = 0.3;
    if (audio.paused) {
      audio.loop = true
      audio.play();
      SetPlay(true);
    }
    else {
      audio.pause();
      audio.currentTime = 0;
      SetPlay(false);
    }
  }

  return (
    <div className="flex items-center border pr-4">
      <button className="bg-white w-12 h-12 flex items-center justify-center" onClick={toggleAudio}>
        <Image
          className="text-background"
          src={isPlay ? "/pause.svg" : "/play.svg"}
          alt="lu-music"
          width={24}
          height={24}
        />
      </button>
      <p className="text-lg mx-4" title="Please tell me if it's copyrighted">
        jdmfessh - shedon'tluvyou
      </p>
      <Image
        className="invert"
        src="/music.svg"
        alt="lu-music"
        width={24}
        height={24}
      />
    </div>
  )
}