import { forwardRef } from 'react';
import { Button as BaseButton } from '@base-ui/react/button';
import cs from 'classnames';
import classes from './Button.module.scss';

type ButtonSize = 'small' | 'medium' | 'big' | 'large';

type ButtonProps = Omit<React.ComponentPropsWithoutRef<typeof BaseButton>, 'size'> & {
  size?: ButtonSize;
};

const BUTTON_SIZE_CLASS: Record<ButtonSize, string> = {
  small: classes['chat-button--small'],
  medium: classes['chat-button--medium'],
  big: classes['chat-button--big'],
  large: classes['chat-button--large'],
};

const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
  const { className, size, ...rest } = props;

  return (
    <BaseButton
      ref={ref}
      className={cs(
        classes['base-comp-chat-button'],
        size && BUTTON_SIZE_CLASS[size],
        className,
      )}
      {...rest}
    />
  );
});

Button.displayName = 'Button';

export { Button };
export type { ButtonProps, ButtonSize };