import * as React from "react";
import { Text, View } from "@flip.id/ui-kit";
import type { IBadgePropsNew } from "./types";
import type { IViewProps } from "native-base/lib/typescript/components/basic/View/types";

const BadgeIndicator = (props: IBadgePropsNew) => {
  const dotStyle = React.useMemo<IViewProps>(
    () => (!props.label ? { px: "1", py: "1", alignSelf: "center" } : {}),
    [props.label]
  );

  const labelGenerator = React.useMemo<string | number | undefined>(
    () => (props?.label && props?.label > 999 ? "999+" : props?.label),
    [props.label]
  );
  return (
    <View
      p={"4px"}
      py={"1px"}
      background={`${props.colorScheme}.Plus1`}
      borderRadius={"full"}
      borderWidth={"1px"}
      borderColor={"neutral.White"}
      {...dotStyle}
      {...props._box}
    >
      {props.label !== "" && (
        <Text
          mt={"0px"}
          lineHeight={"14px"}
          fontWeight={"bold"}
          fontSize={"12px"}
          color={"white"}
        >
          {labelGenerator}
        </Text>
      )}
    </View>
  );
};

export default BadgeIndicator;