import React from 'react';

import Typography from '../Typography';
import Sliders from '../Sliders';

import { Group, SliderWrapper } from '../../global/toolStyled';

type Props = {
  title: string;
  defaultValue?: number;
  value?: number;
  tips: string;
  onSlide: (value: number) => void;
  minimum?: number;
  maximum?: number;
};

const index = ({
  title,
  defaultValue,
  value,
  tips,
  onSlide,
  minimum,
  maximum,
}: Props): React.ReactElement => (
  <>
    <Typography variant="subtitle" style={{ marginTop: '4px' }} align="left">
      {title}
    </Typography>
    <Group>
      <SliderWrapper>
        <Sliders
          minimum={minimum}
          maximum={maximum}
          defaultValue={defaultValue}
          value={value}
          onChange={onSlide}
        />
      </SliderWrapper>
      {tips}
    </Group>
  </>
);

export default index;