import React from 'react';
import PropTypes from 'prop-types';
import 'tailwindcss/tailwind.css';

const Slider = ({ min, max, value, onChange }) => {
  const handleMinChange = (event) => {
    const newMin = Number(event.target.value);
    if (newMin < value[1]) {
      onChange([newMin, value[1]]);
    } else {
      onChange([newMin, newMin + 1]);
    }
  };

  const handleMaxChange = (event) => {
    const newMax = Number(event.target.value);
    if (newMax > value[0]) {
      onChange([value[0], newMax]);
    } else {
      onChange([newMax - 1, newMax]);
    }
  };

  return (
    <div className="space-y-4">
      <div className="flex items-center space-x-4">
        <div className="flex items-center space-x-2 w-1/2">
          <span className="text-emerald-600">{value[0]}</span>
          <input
            type="range"
            min={min}
            max={max}
            value={value[0]}
            onChange={handleMinChange}
            className="w-full h-2 bg-emerald-200 rounded-lg appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50"
          />
        </div>
        <div className="flex items-center space-x-2 w-1/2 justify-end">
          <span className="text-emerald-600">{value[1]}</span>
          <input
            type="range"
            min={value[0] + 1}
            max={max}
            value={value[1]}
            onChange={handleMaxChange}
            className="w-full h-2 bg-emerald-200 rounded-lg appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50"
          />
        </div>
      </div>
    </div>
  );
};

Slider.propTypes = {
  min: PropTypes.number.isRequired,
  max: PropTypes.number.isRequired,
  value: PropTypes.arrayOf(PropTypes.number).isRequired,
  onChange: PropTypes.func.isRequired,
};

export default Slider;