import {Minus, Plus} from "lucide-react";
import CircularIconButton from "./CircularIconButton.tsx";
import clsx from "clsx";

type NumberStepControlProps = {
    /** Current numeric value */
    value: number;
    /** Callback when value changes */
    onChange: (newValue: number) => void;
    /** Optional: minimum allowed value */
    min?: number;
    /** Optional: maximum allowed value */
    max?: number;
    /** Optional: step increment (default = 1) */
    step?: number;
    /** Optional: additional Tailwind classes */
    className?: string;
};

/**
 * A compact number input with +/– buttons.
 * Removes native browser spinners and supports min/max limits.
 */
export function NumberStepControl({
                                      value,
                                      onChange,
                                      min = Number.NEGATIVE_INFINITY,
                                      max = Number.POSITIVE_INFINITY,
                                      step = 1,
                                      className = "",
                                  }: NumberStepControlProps) {
    const handleDecrease = () => {
        const newValue = Math.max(value - step, min);
        onChange(newValue);
    };

    const handleIncrease = () => {
        const newValue = Math.min(value + step, max);
        onChange(newValue);
    };

    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const num = Number(e.target.value);
        if (!isNaN(num)) onChange(Math.min(Math.max(num, min), max));
    };

    return (
        <div className={clsx(
            "flex items-center gap-2",
            className)}>
            <CircularIconButton
                onClick={handleDecrease}
                icon={Minus}
            />

            <input
                type="text"
                inputMode="numeric"
                pattern="[0-9]*"
                value={value}
                onChange={handleInputChange}
                className="w-16 text-center"
            />

            <CircularIconButton
                onClick={handleIncrease}
                icon={Plus}
            />

        </div>
    );
}
