import React from 'react';
import { Badge as BootstrapBadge, BadgeProps as BootstrapBadgeProps } from 'react-bootstrap';

interface BadgeProps extends BootstrapBadgeProps {
  badge?: string;
  subtle?: boolean;
}

const Badge = ({ subtle=true, bg = "secondary", children, badge, className, ...props }: BadgeProps) => {
  const badgebg = `text-bg-${bg}`;
  const subtlebg = `${bg}-subtle`;

  if (badge) {
    // Nested badge
    return (
      <div className="position-relative">
        <BootstrapBadge
          bg={subtle?subtlebg:bg}
          className={`position-absolute top-0 start-100 translate-middle badge rounded-pill ${subtle?'':badgebg} ${className}`}
          {...props}
        >
          {badge}
          <span className="visually-hidden" />
        </BootstrapBadge>
        {children}
      </div >
    )
  } else {
    // Simple badge
    return (
      <BootstrapBadge
        bg={subtle?subtlebg:bg}
        className={`${subtle?`text-${bg}-emphasis border-${bg}-subtle bg-${bg}-subtle`:badgebg} ${className} p-2`} {...props}
      >
        {children}
      </BootstrapBadge>
    )
  }
};

export default Badge;
export { Badge, BadgeProps };