import { useSlider } from 'features/StreamPlayer/hooks/useSlider'

import {
  Wrapper,
  VolumeButton,
  VolumeProgressList,
  VolumeProgress,
  Scrubber,
} from './styled'

type Props = {
  muted: boolean,
  onChange: (progress: number) => void,
  onClick: () => void,
  value: number,
}

export const VolumeBar = ({
  muted,
  onChange,
  onClick,
  value,
}: Props) => {
  const progressRef = useSlider({ onChange })
  return (
    <Wrapper>
      <VolumeButton onClick={onClick} muted={muted} />
      <VolumeProgressList ref={progressRef}>
        <VolumeProgress value={muted ? 0 : value} />
        <Scrubber value={muted ? 0 : value} />
      </VolumeProgressList>
    </Wrapper>
  )
}