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

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

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

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

  return (
    <button
      ref={ref}
      type="button"
      className={clsx(inputClassNameBase({ size }), 'np-button-input', className)}
      style={{ ...inputPaddings, ...style }}
      {...restProps}
    />
  );
});