import { Flex, InputNumber, Typography } from 'antd'
import PropTypes from 'prop-types'

const { Text } = Typography

const MinMaxInput = ({
  value = {},
  onChange,
  prefix = '',
  suffix = '',
  min,
  max,
  step,
  disabled = false
}) => {
  const handleChange = (field, val) => {
    if (!onChange) return
    onChange({ ...value, [field]: val })
  }

  return (
    <Flex gap={'middle'} align='center' style={{ width: '100%' }}>
      <InputNumber
        addonBefore={<Text type='secondary'>Min:</Text>}
        value={value?.min}
        onChange={(val) => handleChange('min', val)}
        prefix={prefix}
        suffix={suffix}
        min={min}
        max={max}
        step={step}
        disabled={disabled}
        style={{ minWidth: 120, flex: 1 }}
      />
      <InputNumber
        addonBefore={<Text type='secondary'>Max:</Text>}
        value={value?.max}
        onChange={(val) => handleChange('max', val)}
        prefix={prefix}
        suffix={suffix}
        min={min}
        max={max}
        step={step}
        disabled={disabled}
        style={{ minWidth: 120, flex: 1 }}
      />
    </Flex>
  )
}

MinMaxInput.propTypes = {
  value: PropTypes.shape({
    min: PropTypes.number,
    max: PropTypes.number
  }),
  onChange: PropTypes.func,
  prefix: PropTypes.string,
  suffix: PropTypes.string,
  min: PropTypes.number,
  max: PropTypes.number,
  step: PropTypes.number,
  disabled: PropTypes.bool
}

export default MinMaxInput