import * as React from 'react';
import * as BadgeBase from '@tesseract-design/web-base-badge';

export interface BadgeProps extends React.HTMLProps<HTMLSpanElement> {
  rounded?: boolean,
};

export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
  (
    {
      children,
      rounded = false,
    },
    ref,
  ) => {
    const badgeStyleProps: BadgeBase.BadgeBaseArgs = {
      rounded,
    };

    return (
      <strong
        ref={ref}
        className={BadgeBase.Root(badgeStyleProps)}
        data-testid="badge"
      >
        <span
          className={BadgeBase.Content()}
        >
          {children}
        </span>
      </strong>
    )
  }
)

Badge.displayName = 'Badge';
