Function StatsSummaryGrid

frontend/src/components/stats/StatsSummaryGrid.tsx:43–88

({ collectionInfo, recentSessions }: StatsSummaryGridProps)

}

const StatsSummaryGrid = ({ collectionInfo, recentSessions }: StatsSummaryGridProps) => {
  const { t } = useTranslation()

  const averageAccuracy = calculateAverageAccuracy(recentSessions)
  const learningTrend = calculateLearningTrend(recentSessions)

  const formattedTrend =
    learningTrend !== null ? `${learningTrend > 0 ? '+' : ''}${learningTrend}%` : '-'

  return (
    <SimpleGrid columns={{ base: 1, md: 2, lg: 4 }} gap={4}>
      <StatCard label={t('general.words.totalCards')} value={collectionInfo.total_cards} />
      <StatCard
        label={t('components.stats.practiceSessions')}
        value={collectionInfo.total_practice_sessions}
      />
      <StatCard
        label={t('components.stats.averageAccuracy')}
        value={averageAccuracy !== null ? `${averageAccuracy}%` : '-'}
        helpText={
          averageAccuracy !== null
            ? t('components.stats.allSessions')
            : t('components.stats.noRecentSessions')
        }
      />
      <StatCard
        label={t('components.stats.learningTrend')}
        value={formattedTrend}
        helpText={
          learningTrend !== null
            ? t('components.stats.comparedToPrevious')
            : t('components.stats.notEnoughData')
        }
        valueColor={
          learningTrend !== null
            ? learningTrend > 0
              ? 'green.500'
              : learningTrend < 0
                ? 'red.500'
                : undefined
            : undefined
        }
      />
    </SimpleGrid>
  )
}

export default StatsSummaryGrid