import { useState } from "react";
import AddIcon from "@/shared/icons/addicon.svg";
import RemoveIcon from "@/shared/icons/removeicon.svg";

type StepperProps = {
    value: number;
    onChange: (value: number) => void;
    step?: number;
    minLimit?: number;
    maxLimit?: number;
    disableDecrement?: boolean;
    disableIncrement?: boolean;
    unitLabel?: string;
};

const RangeStepper: React.FC<StepperProps> = ({
    value,
    onChange,
    step = 1,
    minLimit = Number.MIN_SAFE_INTEGER,
    maxLimit = Number.MAX_SAFE_INTEGER,
    disableDecrement,
    disableIncrement,
    unitLabel,
}) => {
    const handleChange = (val: number) => {
        if (val >= minLimit && val <= maxLimit) {
            onChange(val);
        }
    };

    return (
        <div className="flex items-center gap-2">
            <button
                onClick={() => handleChange(value - step)}
                disabled={disableDecrement || value - step < minLimit}
                className="border border-[#5356A6] text-[#5356A6] w-[26px] h-[24px] rounded flex items-center justify-center text-lg disabled:opacity-50 bg-white cursor-pointer"
            >
                <RemoveIcon />
            </button>

            <div className="relative">
                <input
                    type="number"
                    value={value}
                    onChange={(e) => handleChange(Number(e.target.value))}
                    className={`h-8 border border-gray-300 rounded text-base appearance-none
                                [&::-webkit-outer-spin-button]:appearance-none
                                [&::-webkit-inner-spin-button]:appearance-none
                                [&::-moz-spin-box]:appearance-none
                                ${unitLabel ? "w-20 pl-3 pr-10 text-left" : "w-14 text-center"}
                             `}
                    style={{ MozAppearance: "textfield" }}
                />
                {unitLabel && (
                    <span className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 text-sm text-semibold pointer-events-none">
                        {unitLabel}
                    </span>
                )}
            </div>

            <button
                onClick={() => handleChange(value + step)}
                disabled={disableIncrement || value + step > maxLimit}
                className="bg-[#5356A6] text-white w-[26px] h-[24px] rounded flex items-center justify-center text-lg disabled:opacity-50 cursor-pointer"
            >
                <AddIcon />
            </button>
        </div>
    );
};

export default RangeStepper;