import React, { memo } from 'react';
import { Text, View } from 'react-native';
import { formatMessage } from '../../i18n';
import numeral from 'numeral';
import { STREAM_COUNT_FORMAT } from '../../constants';
import { withTheme } from '../../branding';
import styles from './styles';
import type { ThemeModeType } from '../BrandFilters/BrandFilters.tsx';

interface StreamsProps {
    theme: ThemeModeType;
    streamQuantity?: number;
    streamsText?: string;
}

const Streams = ({ theme, streamQuantity, streamsText }: StreamsProps) => {
    const themeStyles = styles[theme];
    return (
        <View testID="songTileStreams" style={themeStyles.songTileStreams}>
            <Text testID="songTileStreamText" style={themeStyles.textSecondary}>
                {streamsText || `${formatMessage('sorting.7dStreams')}:`}
            </Text>
            <Text
                testID="songTileStreamQuantity"
                style={themeStyles.textPrimary}
            >
                {streamQuantity
                    ? numeral(streamQuantity)
                          .format(STREAM_COUNT_FORMAT)
                          .toUpperCase()
                    : '-'}
            </Text>
        </View>
    );
};

export default memo(withTheme(Streams));