import React from 'react';
import { Calendar } from 'lucide-react';

const DateRange = ({ nameStart, nameEnd, valueStart, valueEnd, onChange, label }) => {
  return (
    <div className="space-y-4 mt-4 p-4 border rounded-md shadow-sm bg-white">
      <label className="block text-lg font-medium text-gray-700 mb-2">{label}</label>
      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 items-center">
        <div className="relative flex items-center">
          <span className="mr-2">Du</span>
          <Calendar className="w-5 h-5 text-emerald-500 absolute top-3 left-16" />
          <input 
            type="date"
            name={nameStart}
            value={valueStart}
            onChange={onChange}
            className="block w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-emerald-500 focus:border-emerald-500 hover:ring-emerald-400 ml-8"
            placeholder="Date de début"
          />
        </div>
        <div className="relative flex items-center">
          <span className="mr-2">Au</span>
          <Calendar className="w-5 h-5 text-emerald-500 absolute top-3 left-16" />
          <input 
            type="date"
            name={nameEnd}
            value={valueEnd}
            onChange={onChange}
            className="block w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-emerald-500 focus:border-emerald-500 hover:ring-emerald-400 ml-8"
            placeholder="Date de fin"
          />
        </div>
      </div>
    </div>
  );
};

export default DateRange;