import React from 'react'
import classnames from 'classnames'
import { BsPlay, BsPause } from 'react-icons/bs'

import { CircleButton } from './Button'

function PlayButton ({ playing, toggleState, className }) {
  return (
    <CircleButton
      className={classnames(className, 'h-5 w-5 box-content grid place-content-center')}
      onClick={() => toggleState(!playing)}
      title={playing ? 'Pause' : 'Play timeline'}
    >
      { playing
        ? <BsPause className='w-5 h-5 text-gray-500' />
        : <BsPlay className='w-6 h-6 text-gray-500 pl-0.5' /> }
    </CircleButton>
  )
}

export default PlayButton