// src/components/Filters/Filters.jsx
import React from 'react';
import './Filters.css';

const Filters = ({
  areaOptions = [],
  statusOptions = [],
  selectedArea,
  selectedStatus,
  onAreaChange,
  onStatusChange,
  startDate,
  endDate,
  onStartDateChange,
  onEndDateChange,
}) => {
  return (
    <div className="filters-container">
      {areaOptions.length > 0 && (
        <div className="filter-select-wrapper">
          <select className="filter-select" value={selectedArea} onChange={onAreaChange}>
            {areaOptions.map((area, index) => (
              <option key={index} value={area}>
                {area}
              </option>
            ))}
          </select>
        </div>
      )}

      {statusOptions.length > 0 && (
        <div className="filter-select-wrapper">
          <select className="filter-select" value={selectedStatus} onChange={onStatusChange}>
            {statusOptions.map((status, index) => (
              <option key={index} value={status}>
                {status}
              </option>
            ))}
          </select>
        </div>
      )}

      {onStartDateChange && (
        <input
          type="date"
          className="filter-date"
          value={startDate}
          onChange={onStartDateChange}
        />
      )}

      {onEndDateChange && (
        <input
          type="date"
          className="filter-date"
          value={endDate}
          onChange={onEndDateChange}
        />
      )}
    </div>
  );
};

export default Filters;



// src/components/Filters.jsx
// import React from 'react';
// import '../styles/Filters.css';

// export default function Filters({ area, status, startDate, endDate, onChange }) {
//   return (
//     <div className="filters">
//       <select value={area} onChange={(e) => onChange('area', e.target.value)}>
//         <option value="">Area: Hotel, Restaurant</option>
//         <option value="Hotel">Hotel</option>
//         <option value="Restaurant">Restaurant</option>
//       </select>

//       <select value={status} onChange={(e) => onChange('status', e.target.value)}>
//         <option value="">Status: Active, Inactive</option>
//         <option value="Active">Active</option>
//         <option value="Inactive">Inactive</option>
//       </select>

//       <input
//         type="date"
//         value={startDate}
//         onChange={(e) => onChange('startDate', e.target.value)}
//       />
//       <input
//         type="date"
//         value={endDate}
//         onChange={(e) => onChange('endDate', e.target.value)}
//       />
//     </div>
//   );
// }
