import { forwardRef } from 'react';
import cs from 'classnames';
import classes from './Badge.module.scss';

interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
  badgeContent?: React.ReactNode;
  invisible?: boolean;
  badgeClassName?: string;
  children: React.ReactNode;
}

const Badge = forwardRef<HTMLDivElement, BadgeProps>((props, ref) => {
  const {
    badgeContent,
    invisible = false,
    badgeClassName,
    className,
    children,
    ...rest
  } = props;

  return (
    <div ref={ref} className={cs(classes['chat-badge'], className)} {...rest}>
      {children}
      <span
        className={cs(
          classes['chat-badge__content'],
          { [classes['chat-badge__content--invisible']]: invisible },
          badgeClassName,
        )}
      >
        {badgeContent}
      </span>
    </div>
  );
});

Badge.displayName = 'Badge';

export { Badge };
export type { BadgeProps };