import { Icon } from 'features/Icon'

import { ScAudioContainer } from './styled'

import { useAudioPlayer } from './hooks'

type AudioPropsType = {
  asset: string,
}

export const AudioPlayer = ({ asset }: AudioPropsType) => {
  const { playing, toggle } = useAudioPlayer(asset)

  return (
    <ScAudioContainer onClick={toggle} playing={playing}>
      <Icon refIcon='Sound' />
    </ScAudioContainer>
  )
}
