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 { NumberInputDecrementButtonProps } from './types';

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

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

NumberInputDecrementButton.displayName = 'NumberInput.DecrementButton';