import React from 'react';

const TimeRange = ({ startTime, endTime, onStartChange, onEndChange }) => {
  return (
    <div className="mb-4">
      <div className="flex space-x-4">
        <div className="w-1/2">
          <label className="block text-sm font-medium text-gray-700 mb-2">Heure de début</label>
          <input
            type="time"
            name="startTime"
            value={startTime}
            onChange={onStartChange}
            className="block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
          />
        </div>
        <div className="w-1/2">
          <label className="block text-sm font-medium text-gray-700 mb-2">Heure de fin</label>
          <input
            type="time"
            name="endTime"
            value={endTime}
            onChange={onEndChange}
            className="block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
          />
        </div>
      </div>
    </div>
  );
};

export default TimeRange;