import { clsx } from 'clsx';
import { forwardRef } from 'react';

import { useInputPaddings } from './InputGroup';
import { inputClassNameBase } from './_common';

export interface ButtonInputProps extends React.ComponentPropsWithRef<'button'> {
  size?: 'sm' | 'md' | 'lg';
}

export const ButtonInput = forwardRef(function ButtonInput(
  { size = 'md', className, style, ...restProps }: ButtonInputProps,
  ref: React.ForwardedRef<HTMLButtonElement | null>,
) {
  const inputPaddings = useInputPaddings();

  return (
    <button
      ref={ref}
      type="button"
      className={clsx(className, inputClassNameBase({ size }), 'np-button-input')}
      // eslint-disable-next-line react/forbid-dom-props
      style={{ ...inputPaddings, ...style }}
      {...restProps}
    />
  );
});
