96 lines
2.5 KiB
TypeScript

import { Text, View } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useTranslation } from 'react-i18next';
type Props = {
totalBlocked: number;
accountCount: number;
isLegend?: boolean;
};
/**
* Kompakte Stats: nur "Blockiert gesamt" prominent + kleines Status-Pill.
* Kein Block-Rate, kein Next-Scan — Mode steht auf den Cards.
*/
export function MailStatsRow({ totalBlocked, accountCount, isLegend }: Props) {
const { t } = useTranslation();
return (
<View
style={{
backgroundColor: '#fff',
borderRadius: 16,
borderWidth: 1,
borderColor: '#e5e5e5',
paddingHorizontal: 18,
paddingVertical: 16,
}}
>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<View style={{ flex: 1 }}>
<Text
style={{
fontSize: 11,
fontFamily: 'Nunito_600SemiBold',
color: '#a3a3a3',
textTransform: 'uppercase',
letterSpacing: 0.6,
}}
>
{t('mail.stats_blocked')}
</Text>
<Text
style={{
fontSize: 32,
fontFamily: 'Nunito_800ExtraBold',
color: '#dc2626',
marginTop: 2,
lineHeight: 36,
}}
>
{totalBlocked.toLocaleString()}
</Text>
<Text
style={{
fontSize: 12,
fontFamily: 'Nunito_400Regular',
color: '#737373',
marginTop: 2,
}}
>
{t('mail.stats_account_summary', { count: accountCount })}
</Text>
</View>
{/* Mode pill */}
<View
style={{
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 10,
paddingVertical: 6,
borderRadius: 999,
backgroundColor: isLegend ? '#f0fdf4' : '#eff6ff',
}}
>
<Ionicons
name={isLegend ? 'flash' : 'time-outline'}
size={13}
color={isLegend ? '#16a34a' : '#2563eb'}
style={{ marginRight: 5 }}
/>
<Text
style={{
fontSize: 12,
fontFamily: 'Nunito_700Bold',
color: isLegend ? '#16a34a' : '#2563eb',
}}
>
{isLegend ? t('mail.live') : t('mail.scheduled')}
</Text>
</View>
</View>
</View>
);
}