import React from 'react';
import classNames from 'classnames';

import { NumberInput as CoreNumberInput } from '@shoptet/ui-core-web';

import type { NumberInputInputProps } from './types';

/**
 * The styled number input field. Wraps the headless core `NumberInput.Input` with the design-system
 * classes and error/warning states. Rendered directly by `NumberInput` standalone, and used as
 * `NumberInput.Input` when composing a stepper.
 */
export function NumberInputInput({ width = 'md', error, warning, label, ref, ...rest }: NumberInputInputProps) {
  return (
    <CoreNumberInput.Input
      {...rest}
      ref={ref}
      className={classNames('numberField', width, {
        'error-field': error,
        'warning-field': warning && !error,
      })}
      invalid={!!error}
      a11yLabel={label}
    />
  );
}

NumberInputInput.displayName = 'NumberInput.Input';