import React from 'react';
import './DateRangeFilter.css';

const DateRangeFilter = ({ 
  dateRange, 
  onDateChange, 
  labels = { from: 'From:', to: 'To:' },
  lang = 'en'
}) => {
  const fromLabel = lang === 'en' ? labels.from : 'Desde:';
  const toLabel = lang === 'en' ? labels.to : 'Hasta:';

  return (
    <div className="date-range-filter">
      <div className="date-input-group">
        <label htmlFor="date-from" className="date-label">
          {fromLabel}
        </label>
        <input
          id="date-from"
          type="date"
          className="date-input"
          value={dateRange.from}
          onChange={(e) => onDateChange({ ...dateRange, from: e.target.value })}
        />
      </div>
      
      <div className="date-input-group">
        <label htmlFor="date-to" className="date-label">
          {toLabel}
        </label>
        <input
          id="date-to"
          type="date"
          className="date-input"
          value={dateRange.to}
          onChange={(e) => onDateChange({ ...dateRange, to: e.target.value })}
        />
      </div>
    </div>
  );
};

export default DateRangeFilter;

