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

interface TimepickerProps {
    value?: Date | string | null;  // ← Add null here
    onChange: (date: Date | null) => void;

    placeholder?: string;
    className?: string;

    minTime?: string;
    maxTime?: string;

    disabled?: boolean;
    use12Hours?: boolean;
}

const Timepicker: React.FC<TimepickerProps> = ({
    value,
    onChange,
    placeholder = "Select time",
    className = "",
    minTime,
    maxTime,
    disabled = false,
    use12Hours = false,
}) => {
    // Convert null to undefined for Flatpickr
    const flatpickrValue = value === null ? undefined : value;

    return (
        <Flatpickr
            value={flatpickrValue ?? undefined}
            options={{
                enableTime: true,
                noCalendar: true,
                dateFormat: use12Hours ? "h:i K" : "H:i",
                time_24hr: !use12Hours,
                minTime,
                maxTime,
                allowInput: false,
                clickOpens: 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 Timepicker;