import React from 'react';
import { Text, View } from 'react-native';
import { safeWithTheme, useTheme } from '../../branding';
import { formatMessage } from '../../i18n';
import SegmentIcon from './SegmentIcon';
import themedStyles from './styles';
import type { SummarySegment } from './types';

const formatCount = (count: number): string =>
    formatMessage('filtersSummary.more', { count });

interface SegmentItemProps {
    segment: SummarySegment;
}

const SegmentItem: React.FC<SegmentItemProps> = ({ segment }) => {
    const { theme } = useTheme();
    const styles = themedStyles[theme];

    return (
        <View style={styles.segment}>
            {Boolean(segment.prefix) && (
                <Text style={styles.prefix}>{segment.prefix}</Text>
            )}
            <SegmentIcon icon={segment.icon} />
            <Text style={styles.value}>{segment.value}</Text>
            {segment.extraCount > 0 && (
                <Text style={styles.value}>
                    {formatCount(segment.extraCount)}
                </Text>
            )}
        </View>
    );
};

export default safeWithTheme(SegmentItem);