import { Motion } from "@legendapp/motion";

import { Fonts, Palette, Style } from "../styles";

const Badge = ({
  count = 0,
  size = 20,
  customContent = null,
  backgroundColor = null,
} = {}) => {
  if (!count && !customContent) {
    return null;
  }

  return (
    <Motion.View
      animate={{ scale: 1 }}
      initial={{ scale: 0 }}
      transition={{ type: "tween", duration: 0.5 }}
      style={{
        position: "absolute",
        top: -size / 4,
        right: -size / 4,
        backgroundColor: backgroundColor || Palette.red,
        borderRadius: 500,
        ...Style.containerCenter,
        width: size,
        height: size,
      }}
    >
      {customContent ? (
        customContent()
      ) : (
        <Motion.Text
          animate={{ scale: 1 }}
          initial={{ scale: 0 }}
          transition={{ type: "tween", duration: 0.5 }}
          style={{
            ...Fonts({ color: Palette.white }),
          }}
        >
          {count}
        </Motion.Text>
      )}
    </Motion.View>
  );
};

export default Badge;