import React, { useState } from "react";
import { MdEvent } from "react-icons/md";
import { formatDateForInput } from "../../utils/dateUtils";

interface DatePickerModalProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: (date: string) => void;
  title: string;
  description?: string;
  confirmText?: string;
  cancelText?: string;
}

const DatePickerModal: React.FC<DatePickerModalProps> = ({
  isOpen,
  onClose,
  onConfirm,
  title,
  description,
  confirmText = "Confirm",
  cancelText = "Cancel",
}) => {
  const [selectedDate, setSelectedDate] = useState(
    formatDateForInput(new Date())
  );

  if (!isOpen) return null;

  const handleConfirm = () => {
    onConfirm(selectedDate);
    onClose();
  };

  return (
    <div className="fixed inset-0 z-50 overflow-y-auto">
      <div className="flex min-h-screen items-center justify-center p-4 text-center">
        <div
          className="fixed inset-0 bg-black bg-opacity-30 transition-opacity"
          onClick={onClose}
        ></div>

        <div className="relative w-full max-w-md transform overflow-hidden rounded-lg bg-white px-8 py-16 text-left shadow-xl transition-all">
          <div className="flex flex-col items-center">
            {/* Icon */}
            <div className="flex h-32 w-32 items-center justify-center rounded-full mb-8 bg-blue-100">
              <MdEvent size={60} color="#3997E0" />
            </div>

            {/* Title */}
            <h3 className="text-2xl font-bold text-[#0F2851] mb-4">{title}</h3>

            {/* Description */}
            {description && (
              <div className="mb-8 text-center">
                <p className="text-lg text-gray-500 whitespace-pre-line">
                  {description}
                </p>
              </div>
            )}

            {/* Date Input */}
            <div className="w-full mb-8">
              <label className="block text-sm font-medium text-gray-700 mb-2">
                Select Date
              </label>
              <input
                type="date"
                value={selectedDate}
                onChange={(e) => setSelectedDate(e.target.value)}
                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-black"
              />
            </div>

            {/* Action Buttons */}
            <div className="w-full flex space-x-4">
              <button
                type="button"
                className="w-1/2 rounded-xl border border-[#3997E0] bg-white px-4 py-2 text-lg font-medium text-[#3997E0] hover:bg-gray-50 focus:outline-none"
                onClick={onClose}
              >
                {cancelText}
              </button>
              <button
                type="button"
                className="w-1/2 rounded-xl bg-[#3997E0] px-4 py-2 text-lg font-medium text-white hover:bg-blue-600 focus:outline-none"
                onClick={handleConfirm}
              >
                {confirmText}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default DatePickerModal;