import { Button, Icon, LoaderSpinner } from '@theme/components';

interface QuantityInputProps {
  quantity: number;
  onChange?: (newQuantity: number) => void;
  min?: number;
  max?: number;
  isLoading?: boolean;
  disabled?: boolean;
  className?: string;
}

export const QuantityInput = ({
  quantity,
  onChange,
  min = 1,
  max = 999,
  isLoading = false,
  disabled = false,
  className = ''
}: QuantityInputProps) => {
  const handleDecrease = () => {
    if (quantity > min && onChange) {
      onChange(quantity - 1);
    }
  };

  const handleIncrease = () => {
    if (quantity < max && onChange) {
      onChange(quantity + 1);
    }
  };

  return (
    <div
      className={`w-[138px] h-11 flex items-center justify-between border p-4 ${className}`}
    >
      <Button
        className="h-auto p-0 hover:bg-transparent hover:text-black"
        appearance="ghost"
        onClick={handleDecrease}
        disabled={disabled || isLoading || quantity <= min}
      >
        <Icon name="minus" size={12} />
      </Button>
      <div>
        {isLoading ? (
          <LoaderSpinner className="w-4 h-4" />
        ) : (
          <span>{quantity}</span>
        )}
      </div>
      <Button
        className="h-auto p-0 hover:bg-transparent hover:text-black"
        appearance="ghost"
        onClick={handleIncrease}
        disabled={disabled || isLoading || quantity >= max}
      >
        <Icon name="plus" size={12} />
      </Button>
    </div>
  );
};