"use client";

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;

    const orange = "blue";

    return (
        <div className={"flex items-center gap-4 " + (className ?? "")}>


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

            </div>

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


