managarten/memoro/apps/mobile/components/statistics/OverviewCard.tsx

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { useTheme } from '~/features/theme/ThemeProvider';
import { useTranslation } from 'react-i18next';
import GlassCard from './GlassCard';
import StatRow from './StatRow';

interface OverviewCardProps {
  memoCount: number;
  memoryCount: number;
  totalDuration: number;
  totalWords: number;
  currentStreak: number;
  averageWordCount: number;
}

const OverviewCard: React.FC<OverviewCardProps> = ({
  memoCount,
  memoryCount,
  totalDuration,
  totalWords,
  currentStreak,
  averageWordCount,
}) => {
  const { isDark } = useTheme();
  const { t } = useTranslation();

  const textColor = isDark ? '#FFFFFF' : '#000000';
  const highlightColor = isDark ? '#FFD700' : '#FFA500';

  const formatDuration = (seconds: number): string => {
    const hours = Math.floor(seconds / 3600);
    const minutes = Math.floor((seconds % 3600) / 60);

    if (hours > 0) {
      return `${hours}h ${minutes}m`;
    } else if (minutes > 0) {
      return `${minutes}m`;
    } else {
      return `${seconds}s`;
    }
  };

  return (
    <GlassCard>
      <Text style={[styles.title, { color: textColor }]}>
        {t('statistics.filter_overview')}
      </Text>
      <View style={styles.statsContainer}>
        <StatRow
          title={t('statistics.memos')}
          value={memoCount.toString()}
          icon="document-text-outline"
        />
        <StatRow
          title={t('statistics.memories')}
          value={memoryCount.toString()}
          icon="sparkles-outline"
        />
        <StatRow
          title={t('statistics.recording_duration')}
          value={formatDuration(totalDuration)}
          icon="volume-high-outline"
        />
        <StatRow
          title={t('statistics.words')}
          value={totalWords.toLocaleString()}
          icon="text-outline"
        />
        <View style={styles.divider} />
        <StatRow
          title={t('statistics.current_streak')}
          value={`${currentStreak} ${t('statistics.days')}`}
          icon="flame-outline"
        />
        <StatRow
          title={t('statistics.average_word_count') || 'Ø Wörter/Memo'}
          value={averageWordCount.toString()}
          icon="analytics-outline"
        />
      </View>
    </GlassCard>
  );
};

const styles = StyleSheet.create({
  title: {
    fontSize: 26,
    fontWeight: '700',
    marginBottom: 20,
  },
  statsContainer: {
    gap: 6,
  },
  divider: {
    height: 0,
    marginVertical: 12,
  },
});

export default OverviewCard;