"use client";

import { useState } from "react";

export function StepperInput() {
  const [qty, setQty] = useState(3);
  const min = 0;
  const max = 99;

  const clamp = (n: number) => Math.min(max, Math.max(min, n));

  return (
    <div
      className="grid min-h-[200px] place-items-center bg-[#FAFAF8] p-12"
      style={{ fontFamily: "Arial, Helvetica, sans-serif" }}
    >
      <div className="text-center">
        <div className="mb-3 font-mono text-[11px] font-bold uppercase tracking-[0.14em] text-[#111111]">
          Quantity
        </div>
        <div className="inline-flex items-stretch border-2 border-[#111111]">
          <button
            type="button"
            onClick={() => setQty((q) => clamp(q - 1))}
            disabled={qty <= min}
            className="grid w-12 place-items-center border-r-2 border-[#111111] text-[22px] font-bold leading-none transition-colors hover:bg-[#111111] hover:text-[#FAFAF8] disabled:opacity-30 disabled:hover:bg-transparent disabled:hover:text-[#111111]"
            aria-label="Decrease"
          >
            −
          </button>
          <div className="grid w-20 place-items-center text-[28px] font-bold tabular-nums">
            {String(qty).padStart(2, "0")}
          </div>
          <button
            type="button"
            onClick={() => setQty((q) => clamp(q + 1))}
            disabled={qty >= max}
            className="grid w-12 place-items-center border-l-2 border-[#111111] text-[22px] font-bold leading-none transition-colors hover:bg-[#111111] hover:text-[#FAFAF8] disabled:opacity-30 disabled:hover:bg-transparent disabled:hover:text-[#111111]"
            aria-label="Increase"
          >
            +
          </button>
        </div>
        <p className="mt-3 font-mono text-[11px] text-[#6B6B66]">
          {qty === 0 ? "Add at least one" : `${qty} in cart`}
        </p>
      </div>
    </div>
  );
}
Stepper Input
