import React from 'react';

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

import { IconName } from '../../Icon/IconName';
import { IconButton } from '../../IconButton/IconButton';

import { dictionary } from './dictionary';
import type { NumberInputIncrementButtonProps } from './types';

/**
 * The styled increment button of a number stepper. The core `NumberInput.IncrementButton` supplies
 * the wiring (increment on click, disabled at `max`); the design-system `IconButton` supplies the look.
 */
export function NumberInputIncrementButton({ label, ...props }: NumberInputIncrementButtonProps) {
  const translations = useTranslations(dictionary);

  return (
    <CoreNumberInput.IncrementButton unwrapped {...props}>
      {({ state, props: { ref, ...buttonProps } }) => (
        <IconButton
          {...buttonProps}
          ref={ref as React.Ref<HTMLButtonElement>}
          ghost
          variant='secondary'
          icon={IconName.SHP_PLUS_SMALL}
          aria-label={props['aria-label'] ?? translations.incrementTo(label, state.nextIncrement ?? 0)}
        />
      )}
    </CoreNumberInput.IncrementButton>
  );
}

NumberInputIncrementButton.displayName = 'NumberInput.IncrementButton';