import React from "react";
import Flatpickr from "react-flatpickr";
import "flatpickr/dist/plugins/monthSelect/style.css";
import monthSelectPlugin from "flatpickr/dist/plugins/monthSelect";

interface MonthPickerProps {
    value?: Date | string;
    onChange: (date: Date | null) => void;
    placeholder?: string;
    className?: string;
    disabled?: boolean;
}

const MonthPicker: React.FC<MonthPickerProps> = ({
    value,
    onChange,
    placeholder = "Select month",
    className = "",
    disabled = false,
}) => {
    return (
        <Flatpickr
            value={value ?? undefined}
            options={{
                plugins: [
                    new (monthSelectPlugin as any)({
                        shorthand: true,      // Jan, Feb
                        dateFormat: "Y-m",    // 2026-04
                        altFormat: "F Y",     // April 2026
                    }),
                ],
            }}
            onChange={(selectedDates) => {
                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 MonthPicker;