"use client";

import { useState } from "react";

export default function CartQuantityInput({
  quantity,
  minOrderQty,
  onChange,
  className,
}: {
  quantity: number;
  minOrderQty: number;
  onChange: (quantity: number) => void;
  className?: string;
}) {
  const [value, setValue] = useState(String(quantity));

  return (
    <div>
      <input
        type="number"
        min={minOrderQty}
        value={value}
        onChange={(e) => setValue(e.target.value)}
        onBlur={() => {
          const clamped = Math.max(minOrderQty, Math.round(Number(value)) || 0);
          setValue(String(clamped));
          if (clamped !== quantity) onChange(clamped);
        }}
        className={className ?? "w-16 rounded border border-stone-200 px-2 py-1 text-sm"}
      />
      {minOrderQty > 1 && <p className="mt-0.5 text-[11px] text-stone-400">Min: {minOrderQty}</p>}
    </div>
  );
}