import React, { Component } from 'react'
import PropTypes from 'prop-types'

export default class AdvancedTabContent extends Component {
  static propTypes = {
    onChange: PropTypes.func,
    lowLabel: PropTypes.string,
    highLabel: PropTypes.string,
    value: PropTypes.number,
    step: PropTypes.number,
    max: PropTypes.number,
    min: PropTypes.number,
  }

  render () {
    const {
      onChange,
      lowLabel,
      highLabel,
      value,
      step,
      max,
      min,
    } = this.props

    return (
      <div className="gas-slider">
        <input
          className="gas-slider__input"
          type="range"
          step={step}
          max={max}
          min={min}
          value={value}
          id="gasSlider"
          onChange={event => onChange(event.target.value)}
        />
        <div className="gas-slider__bar">
          <div className="gas-slider__colored"/>
        </div>
        <div className="gas-slider__labels">
          <span>{lowLabel}</span>
          <span>{highLabel}</span>
        </div>
      </div>
    )
  }
}