import { NowPlaying } from './NowPlaying'
import type { QueueItem } from './QueueList'

export function PlayerBar({ track }: { track: QueueItem | null }) {
  return (
    <div className="player-bar">
      <NowPlaying track={track} />
      <div className="controls">
        <div className="ctrl-btns">
          <button className="ctrl-btn" id="btnPrev">
            &#9198;
          </button>
          <button className="ctrl-btn ctrl-btn-main" id="btnPlayPause">
            &#9654;
          </button>
          <button className="ctrl-btn" id="btnNext">
            &#9197;
          </button>
        </div>
        <div className="progress-row">
          <span className="time" id="timeElapsed">
            0:00
          </span>
          <div className="progress-bar" id="progressBar">
            <div className="progress-fill" id="progressFill" style={{ width: '0%' }} />
          </div>
          <span className="time" id="timeDuration">
            0:00
          </span>
        </div>
      </div>
      <div className="volume-row">
        <span className="vol-icon" id="volIcon">
          &#128266;
        </span>
        <input
          type="range"
          className="volume-slider"
          id="volSlider"
          min={0}
          max={100}
          defaultValue={80}
        />
      </div>
    </div>
  )
}