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

import { getButtonClassName } from '../Button/Button';

type HTMLButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'>;

export interface PrintPositionProps extends HTMLButtonProps {
  /**
   * The position number.
   */
  position: number;
  /**
   * The label of the button shown on hover.
   * If not provided, the button will not be shown.
   */
  label?: string;
  /**
   * Callback triggered when pressing the button.
   */
  onClick?: HTMLButtonProps['onClick'];
  /**
   * Disables the button.
   */
  disabled?: HTMLButtonProps['disabled'];
}

export const PrintPosition = React.forwardRef<HTMLButtonElement, PrintPositionProps>(
  ({ label, position, ...buttonProps }, ref) => {
    return (
      <button ref={ref} className='printPosition' {...buttonProps}>
        <span className='printPosition__position'>{position}</span>
        {label && (
          <span className={classNames('printPosition__label', getButtonClassName({ size: 'sm' }))}>{label}</span>
        )}
      </button>
    );
  }
);

PrintPosition.displayName = 'PrintPosition';