export function QuantityStepper({
  value = 1,
  onDecrease,
  onIncrease,
}: {
  value?: number;
  onDecrease?: () => void;
  onIncrease?: () => void;
}) {
  return (
    <div className="inline-flex h-12 items-center overflow-hidden rounded-control border border-line">
      <button
        type="button"
        className="inline-flex h-full w-12 items-center justify-center border-r border-line text-lg"
        onClick={onDecrease}
      >
        -
      </button>
      <span className="inline-flex h-full min-w-14 items-center justify-center text-sm font-semibold">
        {value}
      </span>
      <button
        type="button"
        className="inline-flex h-full w-12 items-center justify-center border-l border-line text-lg"
        onClick={onIncrease}
      >
        +
      </button>
    </div>
  );
}