import { ChangeEvent } from "react";

interface SliderProps {
	range: { min: number; max: number };
	value: number;
	onChange: (e?: ChangeEvent<HTMLInputElement>) => unknown;
	step?: number;
	suffix?: string;
}

const Slider = (props: SliderProps) => {
	return (
		<div className="flex items-center space-x-2">
			<input
				className="range flex-grow mr-2"
				max={props.range.max}
				min={props.range.min}
				onChange={props.onChange}
				step={props.step ?? 1}
				type="range"
				value={props.value}
			/>
			<div className="flex items-center space-x-2">
				<input
					className="input input-secondary"
					max={props.range.max}
					min={props.range.min}
					onChange={props.onChange}
					step={props.step ?? 1}
					type="number"
					value={props.value}
					size={4}
				/>
				<span>{props.suffix}</span>
			</div>
		</div>
	);
};

export default Slider;