// /components/main/meldungen/DateRangePickerMeldungen.tsx
import React from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

type Props = {
  fromDate: string;
  toDate: string;
  setFromDate: (val: string) => void;
  setToDate: (val: string) => void;
};

const parseISO = (iso: string) => {
  const [y, m, d] = iso.split("-").map(Number);
  return new Date(y, m - 1, d);
};

const formatDate = (d: Date) => d.toLocaleDateString("sv-SE"); // YYYY-MM-DD

const DateRangePickerMeldungen: React.FC<Props> = ({
  fromDate,
  toDate,
  setFromDate,
  setToDate,
}) => {
  return (
    <div className="flex space-x-4 items-center">
      <div className="flex items-center space-x-2">
        <label className="text-sm font-semibold">Von</label>
        <DatePicker
          portalId="root-portal" // beliebige ID
          popperClassName="custom-datepicker-popper"
          selected={parseISO(fromDate)}
          onChange={(date) => date && setFromDate(formatDate(date))}
          selectsStart
          startDate={parseISO(fromDate)}
          endDate={parseISO(toDate)}
          maxDate={new Date()}
          dateFormat="dd.MM.yyyy"
          className="border px-2 py-1 rounded"
        />
      </div>

      <div className="flex items-center space-x-2">
        <label className="text-sm font-semibold">Bis</label>
        <DatePicker
          portalId="root-portal" // beliebige ID
          popperClassName="custom-datepicker-popper"
          selected={parseISO(toDate)}
          onChange={(date) => date && setToDate(formatDate(date))}
          selectsEnd
          startDate={parseISO(fromDate)}
          endDate={parseISO(toDate)}
          maxDate={new Date()}
          dateFormat="dd.MM.yyyy"
          className="border px-2 py-1 rounded"
        />
      </div>
    </div>
  );
};

export default DateRangePickerMeldungen;