"use client";

export function QuantitySelector({
  quantity,
  onChange,
  max = 99,
  size = "md",
}: {
  quantity: number;
  onChange: (next: number) => void;
  max?: number;
  size?: "sm" | "md";
}) {
  const dim = size === "sm" ? "h-7 w-7 text-sm" : "h-9 w-9 text-base";
  return (
    <div className="inline-flex items-center rounded-lg border border-black/10">
      <button
        type="button"
        aria-label="Decrease quantity"
        onClick={() => onChange(Math.max(0, quantity - 1))}
        className={`${dim} flex items-center justify-center font-semibold text-brand-ink transition hover:bg-black/5 rounded-l-lg`}
      >
        −
      </button>
      <span
        className={`flex w-8 items-center justify-center font-medium text-brand-ink ${
          size === "sm" ? "text-sm" : "text-base"
        }`}
        aria-live="polite"
      >
        {quantity}
      </span>
      <button
        type="button"
        aria-label="Increase quantity"
        onClick={() => onChange(Math.min(max, quantity + 1))}
        disabled={quantity >= max}
        className={`${dim} flex items-center justify-center font-semibold text-brand-ink transition hover:bg-black/5 disabled:opacity-30 rounded-r-lg`}
      >
        +
      </button>
    </div>
  );
}