import React from 'react';
import {View, ViewStyle, StyleProp} from 'react-native';
import Text from '@components/Text';
import {COLORS} from '@shared/colors';

import {styles} from './styles';

interface Props {
  value: number;
  style?: StyleProp<ViewStyle>;
  size?: number;
  fontSize?: number;
}

/**
 * @deprecated Use `_HuGo/Badge` instead
 */
function RedBubble({value, style, size = 25, fontSize = 14}: Props) {
  const unreadMessagesStyle = {
    borderRadius: size / 2,
    height: size,
    ...(value < 100 && {width: size}),
  };
  return (
    <View style={[styles.unreadMessages, unreadMessagesStyle, style]}>
      <Text
        color={COLORS.WHITE}
        align="center"
        weight="bold"
        style={[styles.top, {fontSize}]}>
        {value || ''}
      </Text>
    </View>
  );
}

export default RedBubble;