shop-front/src/components/CartControls.tsx

"use client";

import { PRIMARY_COLOR } from "@/config/const";
import { Add, Minus, Trash } from "iconsax-react";
import React from "react";

type CartControlsProps = {
    quantity: number;
    onChange: (next: number) => void;
    onRemove: () => void;
    min?: number;
    max?: number;
    className?: string;
};

export default function CartControls(props: CartControlsProps) {
    const { quantity, onChange, onRemove, min = 1, max, className } = props;

    const canDecrement = quantity > min;
    const canIncrement = typeof max === "number" ? quantity < max : true;


    return (
        <div className={"flex items-center gap-2 sm:gap-4 " + (className ?? "")}>
            <div className="h-10 sm:h-12 rounded-lg sm:rounded-xl border border-border bg-white px-2 sm:px-4 min-w-[100px] sm:min-w-[138px] flex items-center justify-between">
                <button
                    type="button"
                    onClick={() => canIncrement && onChange(quantity + 1)}
                    className="disabled:opacity-40 disabled:cursor-not-allowed p-1"
                    disabled={!canIncrement}
                    aria-label="increase quantity"
                >
                    <Add size={18} color={PRIMARY_COLOR} className="sm:w-5 sm:h-5" />
                </button>
                <span className="text-sm sm:text-[18px] font-medium" style={{ color: PRIMARY_COLOR }}>
                    {quantity}
                </span>
                <button
                    type="button"
                    onClick={() => canDecrement && onChange(quantity - 1)}
                    className="disabled:opacity-40 disabled:cursor-not-allowed p-1"
                    disabled={!canDecrement}
                    aria-label="decrease quantity"
                >
                    <Minus size={18} color={PRIMARY_COLOR} className="sm:w-5 sm:h-5" />
                </button>
            </div>

            <button
                type="button"
                onClick={onRemove}
                className="h-10 w-10 sm:h-12 sm:w-12 rounded-lg sm:rounded-xl border border-border grid place-items-center bg-white"
                aria-label="remove from cart"
            >
                <Trash size={18} color="#AD3434" className="sm:w-5 sm:h-5" />
            </button>
        </div>
    );
}