import React, { useState } from 'react';

const DateFilter = ({ onFilterChange }) => {
  const [startDate, setStartDate] = useState('');
  const [endDate, setEndDate] = useState('');

  const handleFilterClick = () => {
    // Convert the selected dates to timestamps or any format that matches your API
    const startTimestamp = startDate ? new Date(startDate).getTime() : null;
    const endTimestamp = endDate ? new Date(endDate).getTime() : null;

    // Call the callback function to pass the filter values to the parent component
    onFilterChange({ startDate: startTimestamp, endDate: endTimestamp });
  };

  return (
    <div>
      <label>Start Date:</label>
      <input type="date" value={startDate} onChange={(e) => setStartDate(e.target.value)} />

      <label>End Date:</label>
      <input type="date" value={endDate} onChange={(e) => setEndDate(e.target.value)} />

      <button onClick={handleFilterClick}>Apply Filter</button>
    </div>
  );
};

export default DateFilter;