import Tooltip from "../tooltip";
import Input from "../input";

export default function DualRange() {
    return <>
        <div className="lbaic-settings-row lbaic-settings-e-oaiu-row">
            <div className="lbaic-settings-row-in lbaic-settings-e-oaiu-row-in">
                <div className="lbaic-settings-label">
                    <h5 className="lbaic-settings-label-in">Max Response</h5>
                    <Tooltip label='Max Response info message'/>
                </div>
            </div>
            <div className='lbaic-settings-divider lbaic-settings-divider-light'/>
        </div>
        <div className='lbaic-settings-e-oaiu-row lbaic-settings-e-oaiu-z-2'>
            <div className='lbaic-settings-dual-range' style={{'--lbaic-settings-dual-range-min-value': '20%', '--lbaic-settings-dual-range-max-value': '80%'}}>
                <input
                    type='range'
                    className='lbaic-settings-dual-range-input lbaic-settings-dual-range-input-min'
                    value={20}
                    min={0}
                    max={100}
                />
                <input
                    type='range'
                    className='lbaic-settings-dual-range-input lbaic-settings-dual-range-input-max'
                    value={80}
                    min={0}
                    max={100}
                />
            </div>
        </div>
        <div className='lbaic-settings-e-oaiu-row'>
            <div className='lbaic-settings-e-oaiu-input-group'>
                <Input placeholder='Min' value='200' className='lbaic-settings-input-has-value'/>
                <Input placeholder='Max' isReverse value='1560' className='lbaic-settings-input-has-value'/>
            </div>
        </div>
    </>
}