import React from 'react';

const SegmentedSlider = ({ value, min = 1, max = 24, step = 1, onChange }) => {
	const segments = [];
	for (let i = min; i <= max; i += step) {
		segments.push(i);
	}
	const handleInputChange = (e) => {
		let newValue = parseInt(e.target.value, 10);
		if (isNaN(newValue)) newValue = min;
		if (newValue < min) newValue = min;
		if (newValue > max) newValue = max;
		onChange(newValue);
	};
	return (
		<div className='edbi-segmented-slider'>
			<div className='edbi-segments'>
				{segments.map((segment, idx) => (
					<div
						title={idx + 1}
						key={segment}
						className={`edbi-segment ${segment <= value ? 'edbi-segment--active' : ''}`}
						onClick={() => onChange(segment)}
					/>
				))}
			</div>
			<input
				type='number'
				className='edbi-value-box'
				value={value}
				min={min}
				max={max}
				step={step}
				onChange={handleInputChange}
			/>
		</div>
	);
};

export default SegmentedSlider;