import React from "react";

export default function QuantityInput() {
  const [quantity, setQuantity] = React.useState(1);
  return (
    <div className=" flex h-screen w-screen items-center justify-center bg-[#2C2C2C]">
      <div className=" flex h-12 w-32 items-center justify-center gap-1 rounded-full bg-[#262626] text-[#ffffff]">
        <button
          className=" h-9 w-9 select-none rounded-full text-2xl hover:text-gray-400"
          onClick={() => setQuantity((prev) => prev - 1)}
        >
          -
        </button>
        <p className=" flex h-9 w-9 items-center justify-center rounded-full bg-[#3b3b3b] text-sm font-semibold">
          {quantity}
        </p>
        <button
          className=" h-9 w-9 select-none rounded-full text-2xl hover:text-gray-400"
          onClick={() => setQuantity((prev) => prev + 1)}
        >
          +
        </button>
      </div>
    </div>
  );
}