// @flow
import React from 'react'
import { SliderWrapper, SliderInput, SliderIndicator, Label } from './Wrappers'
import NumberTicks from './components/NumberTicks'
import SliderTicks from './components/SliderTicks'

type Props = {
  title: string,
  name: string,
  value: number,
  min: number,
  max: number,
  tickCount: number,
  handleChange: Function
}

const Slider = ({
  title,
  name,
  value,
  min,
  max,
  tickCount,
  handleChange
}: Props) => (
  <SliderWrapper>
    <Label htmlFor={name}>{title}</Label>
    <SliderInput
      title={title}
      name={name}
      value={value}
      min={min}
      max={max}
      onChange={handleChange}
    />
    <SliderTicks value={value} max={max} tickCount={tickCount} />
    <SliderIndicator value={value} max={max} />
    <NumberTicks value={value} min={min} max={max} numberCount={3} />
  </SliderWrapper>
)

export default Slider
