import React from 'react';
import { DimensionValue, Text, View } from 'react-native';
import formatNumber from 'src/screens/InAppScreens/TravelsScreen/utils/formatNumber';
import { Colors } from 'src/theme';

const MessagesDot = ({
  messagesCount,
  right = 0,
  top = -2,
  fullNumber = false
}: {
  messagesCount: number;
  right?: DimensionValue;
  top?: DimensionValue;
  fullNumber?: boolean;
}) => {
  return (
    <View
      style={[
        {
          position: 'absolute',
          right,
          top
        }
      ]}
    >
      <View
        style={{
          paddingHorizontal: 4,
          paddingVertical: 2,
          backgroundColor: Colors.ORANGE,
          borderRadius: 10,
          minWidth: 18,
          justifyContent: 'center',
          alignItems: 'center',
          borderWidth: 1,
          borderColor: Colors.WHITE
        }}
      >
        {messagesCount > 0 && (
          <Text style={{ fontFamily: 'montserrat-700', fontSize: 10, color: Colors.WHITE }}>
            {messagesCount > 99 && !fullNumber ? '99+' : formatNumber(messagesCount)}
          </Text>
        )}
      </View>
    </View>
  );
};

export default MessagesDot;
