import {useRef, useState} from 'react'
import './App.scss'

function App() {
  const [playList, setPlayList] = useState([
    {name: '/Imagine Dragons - Believer.mp3', duration: 600, author: 'Кто то'},
    {name: '/Imagine Dragons - Believer.mp3', duration: 600, author: 'Кто то'},
    {name: '/Imagine Dragons - Believer.mp3', duration: 600, author: 'Кто то'},
    {name: '/Imagine Dragons - Believer.mp3', duration: 600, author: 'Кто то'},
    {name: '/Imagine Dragons - Believer.mp3', duration: 600, author: 'Кто то'}
  ])

  const auidoRef = useRef<HTMLAudioElement | null>(null)

  const playHandler = () => {
    auidoRef?.current?.play()
  }

  const pauseHandler = () => {
    auidoRef?.current?.pause()
  }

  console.log(auidoRef);
  

  return (
    <div className="App">

      <div style={{height: '10px', width: '40px', backgroundColor: 'white'}}>
        
      </div>

      <button onClick={playHandler}>Play</button>
      <button onClick={pauseHandler}>Pause</button>

      <audio controls style={{display: 'none'}} ref={auidoRef}>
        <source src={playList[4].name} type="audio/mpeg" />
      </audio>
    </div>
  )
}

export default App
