import React, { memo } from 'react';
import { Text, View } from 'react-native';
import { isNumber } from 'lodash';
import numeral from 'numeral';
import { FOLLOWER_COUNT_FORMAT } from '../../constants';
import { withTheme } from '../../branding';
import Followers from '../Icons/Followers';
import styles from './styles';
import type { ThemeModeType } from '../BrandFilters/BrandFilters.tsx';

interface FollowersLabelProps {
    theme: ThemeModeType;
    followersCount?: number;
}

export const FollowersLabel = ({
    theme,
    followersCount
}: FollowersLabelProps) => {
    const themeStyles = styles[theme];

    if (!isNumber(followersCount)) {
        return null;
    }

    return (
        <View testID="followersLabel" style={themeStyles.followersContainer}>
            <Followers />
            <Text style={themeStyles.title}>
                {numeral(followersCount)
                    .format(FOLLOWER_COUNT_FORMAT)
                    .toUpperCase()}
            </Text>
        </View>
    );
};

export default memo(withTheme(FollowersLabel));