function Button(Props) {
  const { children, onClick } = Props;

  return (
    <button
      onClick={onClick}
      type="button"
      data-input-counter-increment="counter-input"
      className="flex-shrink-0  bg-gray-700 hover:bg-gray-600 border-gray-600 inline-flex items-center justify-center border rounded-md h-5 w-5  focus:ring-gray-700 focus:ring-2 focus:outline-none"
    >
      {children}
    </button>
  );
}
export default function NumberInput(Props) {
  const { value = 0, setValue, max, min } = Props;

  return (
    <div className="relative flex items-center">
      <Button onClick={() => setValue(value - 1)}>
        <svg
          className="w-2.5 h-2.5 text-white"
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 18 2"
        >
          <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M1 1h16" />
        </svg>
      </Button>
      <input
        min={min}
        max={max}
        type="text"
        data-input-counter
        className="flex-shrink-0 text-white border-0 bg-transparent text-sm font-normal focus:outline-none focus:ring-0 max-w-[2.5rem] text-center"
        placeholder=""
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      <Button onClick={() => setValue(value + 1)}>
        <svg
          className="w-2.5 h-2.5 text-white"
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 18 18"
        >
          <path strokeLinecap="round" stroke="currentColor" strokeLinejoin="round" strokeWidth="2" d="M9 1v16M1 9h16" />
        </svg>
      </Button>
    </div>
  );
}