import React from "react";
import IconMinus from "./Icon/IconMinus";
import IconPlus from "./Icon/IconPlus";

interface TouchSpinProps {
    value: number;
    onChange: (value: number) => void;
    min?: number;
    max?: number;
    step?: number;
}

const TouchSpin: React.FC<TouchSpinProps> = ({
    value,
    onChange,
    min = 0,
    max,
    step = 1,
}) => {
    const decrease = () => {
        if (value > min) onChange(value - step);
    };

    const increase = () => {
        if (max === undefined || value < max) {
            onChange(value + step);
        }
    };

    return (
        <div className="inline-flex items-center rounded-md border border-slate-300 overflow-hidden bg-white">
            <button
                type="button"
                onClick={decrease}
                className="w-9 h-9 flex items-center justify-center border-r hover:bg-slate-100"
            >
                <IconMinus />
            </button>

            <input
                type="number"
                value={value}
                min={min}
                max={max}
                onChange={(e) =>
                    onChange(Math.max(min, Number(e.target.value) || 0))
                }
                className="w-14 h-9 text-center outline-none"
            />

            <button
                type="button"
                onClick={increase}
                className="w-9 h-9 flex items-center justify-center border-l hover:bg-slate-100"
            >
                <IconPlus />
            </button>
        </div>
    );
};

export default TouchSpin;