import React, { useEffect, useRef } from "react";

const DatePicker = ({ onDateChange }) => {
  const inputRef = useRef(null);

  useEffect(() => {
    const fp = flatpickr(inputRef.current, {
      dateFormat: "Y-m-d",
      defaultDate: new Date(),
      onChange: (selectedDates, dateStr) => {
        if (onDateChange) {
          onDateChange(dateStr); // Pass selected date to parent
        }
      }
    });

    return () => {
      // Cleanup flatpickr instance
      fp.destroy();
    };
  }, [onDateChange]);

  return (
    <div className="container mt-3">
      <div className="mb-3">
        <label htmlFor="flatpickr-single" className="form-label">
          Select Date
        </label>
        <input
          type="text"
          id="flatpickr-single"
          className="form-control"
          placeholder="YYYY-MM-DD"
          ref={inputRef}
        />
      </div>
    </div>
  );
};

export default DatePicker;