import classes from "./quantity-control.module.css";
import { Loader } from "lucide-react";
import { Delete, MinusSign, PlusSign } from "../Icons";

interface CartProductQuantityProps {
  quantity: any;
  decrease: () => void;
  AddToCart: () => void;
  loading?: boolean;
  className?: string;
  // [x: string]: any;
}

const CartProductQuantity: React.FC<CartProductQuantityProps> = ({
  quantity,
  decrease,
  AddToCart,
  loading,
  className,
}) => {
  return (
    <div
      className={`${className}  border-solid border !bg-white !border-gray-200 py-2 px-4 w-max rounded-xl overflow-hidden flex rtl:flex-row-reverse items-center  ${classes["product-details-button-control"]}`}
      id="count"
    >
      <button
        type="button"
        onClick={decrease}
        disabled={loading}
        className="w-max h-full cursor-pointer  hover:bg-primary/50 transition-colors text-primary"
      >
        {quantity <= 1 ? (
          <Delete color="#666" className="size-5" />
        ) : (
          <MinusSign disabled={true} />
        )}
      </button>
      <div className="sm:max-w-48 px-4">
        {loading ? (
          <Loader className="text-primary w-[18px] h-[30px] animate-spin" />
        ) : (
          <span className="min-w-[50px]">
            {quantity.toString().padStart(2, "0")}
          </span>
        )}
      </div>
      <button
        disabled={loading}
        type="button"
        onClick={AddToCart}
        className=" w-max h-full cursor-pointer  hover:bg-primary/50 transition-colors text-primary"
      >
        <PlusSign disabled={true} />
      </button>
    </div>
  );
};

export default CartProductQuantity;