import { ReactNode } from "react";

import "./Badge.css";
import { getCN, renderProps } from "../utils";

interface IBadge extends React.HTMLAttributes<HTMLDivElement> {
  mode?: "none" | "primary" | "positive" | "warning" | "danger"
}

function Badge({
  children,
  mode = `primary`,
  ...props
}: IBadge) {
  return (
    <div className={getCN(`Badge`, props.className)}>
      <div
        {...props}
        className={getCN([`Badge__in`, `Badge__in--${mode}`], props.className)}
      >
        {children}
      </div>
    </div>
  );
}

export default Badge;