import React from "react";
import Flatpickr from "react-flatpickr";
import "flatpickr/dist/themes/material_blue.css";

interface DateTimePickerProps {
    value?: Date | string;
    onChange: (date: Date | null) => void;

    placeholder?: string;
    className?: string;

    minDate?: string | Date;
    maxDate?: string | Date;

    disabled?: boolean;
    use12Hours?: boolean;
}

const DateTimePicker: React.FC<DateTimePickerProps> = ({
    value,
    onChange,
    placeholder = "Select date & time",
    className = "",
    minDate,
    maxDate,
    disabled = false,
    use12Hours = false,
}) => {
    return (
        <Flatpickr
            value={value ?? undefined}
            options={{
                enableTime: true,
                dateFormat: use12Hours ? "Y-m-d h:i K" : "Y-m-d H:i",
                time_24hr: !use12Hours,
                minDate,
                maxDate,
                allowInput: true,
            }}
            onChange={(selectedDates: Date[]) => {
                onChange(selectedDates.length ? selectedDates[0] : null);
            }}
            className={`form-input w-full border border-gray-300 rounded px-3 py-2 
                focus:border-blue-500 focus:ring-2 focus:ring-blue-200 ${className}`}
            placeholder={placeholder}
            disabled={disabled}
        />
    );
};

export default DateTimePicker;