interface Props {
  children: React.ReactNode;
  varient?:
    | "primary"
    | "secondary"
    | "plain"
    | "success"
    | "danger"
    | "warning"
    | "info"
    | "light"
    | "lite"
    | "smart"
    | "pro";
  className?: string;
}

const Badge = ({ children, varient, className }: Props) => (
  <span
    className={`badge text-bg-${varient && varient} ${className && className}`}
  >
    {children}
  </span>
);

export { Badge };
