import React, { forwardRef, FunctionComponent } from "react";
import classNames from "classnames";
import { BoxProps, Box } from "../Box";
import { bem } from "../../utilities/bem";
import { STATUS_VARIANT } from "../../types";

const cn = "Badge";

export enum BADGE_SIZE {
  MEDIUM = "medium",
  MICRO = "micro",
}

export interface BadgeProps extends BoxProps {
  variant?: STATUS_VARIANT;
  size?: BADGE_SIZE;
}

export const Badge: FunctionComponent<BadgeProps> = forwardRef<
  HTMLDivElement,
  BadgeProps
>(
  (
    {
      className,
      variant = STATUS_VARIANT.DEFAULT,
      size = BADGE_SIZE.MEDIUM,
      ...rest
    },
    ref,
  ) => {
    return (
      <Box
        ref={ref}
        className={classNames(
          bem(cn),
          bem(cn, { m: variant }),
          bem(cn, { m: size }),
          className,
        )}
        {...rest}
      />
    );
  },
);

export default Badge;