import { faStepForward, faStepBackward, faPlay, faStop } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

const Buttons = ({ current, setCurrent, playlist }) => (
  <>
    <div
      className={current !== null && current > 0 ? '' : 'iconOff'}
      onClick={() => { current !== null && current > 0 && setCurrent(c => c - 1) }}
    >
      <FontAwesomeIcon icon={faStepBackward} />
    </div>
    <div
      className={current === null ? 'iconOff' : ''}
      onClick={() => { current !== null && setCurrent(null) }}
    >
      <FontAwesomeIcon icon={faStop} />
    </div>
    <div
      className={current === null ? '' : 'iconOff'}
      onClick={() => { current === null && setCurrent(0) }}
    >
      <FontAwesomeIcon icon={faPlay} />
    </div>
    <div
      className={current !== null && current < playlist.length - 1 ? '' : 'iconOff'}
      onClick={() => { current !== null && current < playlist.length - 1 && setCurrent(c => c + 1) }}
    >
      <FontAwesomeIcon icon={faStepForward} />
    </div>
  </>
)

export default Buttons