import { Box } from 'components/common';

interface RangeInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  label: string;
  formattedValue?: string | number;
}

export const RangeInput = ({
  label,
  name,
  value,
  formattedValue,
  ...props
}: RangeInputProps) => {
  const inputValue = formattedValue || value;
  return (
    <Box spacingY={2}>
      <Box display="flex" justify="between">
        <span className="fz14 medium">{label}</span>
        {inputValue && <span className="fz14">{inputValue}</span>}
      </Box>
      <input
        className="w100"
        type="range"
        min={props.min}
        max={props.max}
        step={props.step}
        name={name}
        value={value}
        {...props}
      />
    </Box>
  );
};