import React from 'react';
import common from '../src/helpers/common'; // Ensure this path is correct

interface ModalProps {
  children: React.ReactNode;
  isOpen: boolean;
  onClose: () => void;
  forDate: Date;
  useFilterDate: boolean;
  onUseFilterDateChange: (value: boolean) => void;
}

function Modal({ children, isOpen, onClose, forDate, useFilterDate, onUseFilterDateChange }: ModalProps) {
  if (!isOpen) return null;
  const isValidDate = forDate instanceof Date && !isNaN(forDate.getTime());
  console.log("forDate", forDate, isValidDate);

  return (
    <div className="fixed inset-0 flex items-center justify-center z-50">
      <div className="bg-white p-4 rounded-md shadow-lg modal-content">
        {isValidDate && (
          <h2 className="text-xl font-bold mb-2">
            <label className="cursor-pointer">
              <input
                type="checkbox"
                checked={useFilterDate}
                onChange={(e) => onUseFilterDateChange(e.target.checked)}
              />
              {` на разположение ${common.getDateFormated(forDate)} или ${common.getDayOfWeekName(forDate)}`}
            </label>
          </h2>
        )}
        {children}
        <button type="button" onClick={onClose} className="mt-4 text-red-500">
          Close
        </button>
      </div>
      <div className="fixed inset-0 bg-black opacity-50 modal-overlay" onClick={onClose}></div>
    </div>
  );
}

export default Modal;