import React from 'react'
import { connect } from 'react-redux'

import { VolumeOn, VolumeOff } from './audio.icons'

import actions from 'site/actions'

const MuteButton = ({ muted }) => (
  <div className="mute" onClick={muted ? actions.audio.unmute : actions.audio.mute}>
    {muted ? VolumeOff : VolumeOn}
  </div>
)

const mapStateToProps = state => ({
  muted: state.audio.muted,
})

export default connect(mapStateToProps)(MuteButton)