function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React, { useMemo } from "react";
import Text from "../../atoms/text/text";
import Pressable from "../../atoms/pressable/pressable";
import { pearl } from "../../../pearl";
/**
 * CustomBadge is a component that renders a badge with a value.
 * The value can be a number, a string, or a React element.
 * If the value is a number or a string, it will be rendered inside a Text component.
 * If the value is a React element, it will be cloned and rendered as is.
 * If the value is an array, it will be joined into a string and rendered inside a Text component.
 * If the value is undefined, nothing will be rendered.
 */
const CustomBadge = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(({
  children,
  atoms
}, ref) => {
  // Function to render the value of the badge
  const renderValue = useMemo(() => {
    if (children === undefined) return null;

    // If children is an array, join it into a string
    if (Array.isArray(children)) children = children.join("");

    // If children is a number or a string, render it inside a Text component
    if (typeof children === "number" || typeof children === "string") return /*#__PURE__*/React.createElement(Text, atoms.text, children);
    // If children is a React element, clone it and render it as is
    else return /*#__PURE__*/React.cloneElement(children);
  }, [children, atoms]);
  return /*#__PURE__*/React.createElement(Pressable, _extends({}, atoms.box, {
    ref: ref,
    alignItems: "center",
    justifyContent: "center"
  }), renderValue);
}));

/** A Badge is a small component typically used to communicate a numerical value or indicate the status of an item to the user. */
const Badge = pearl(CustomBadge, {
  componentName: "Badge",
  type: "molecule",
  animatable: true
}, undefined, {
  partForOverridenStyleProps: "box",
  partForOverridenNativeProps: "box",
  partForOverridenAnimationProps: "box"
});
Badge.displayName = "Badge";
export default Badge;
//# sourceMappingURL=badge.js.map