import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import SectionTitle from '../../../shared/components/ui/SectionTitle';
import { colors, radius, spacing, typography } from '../../../theme';

type StatisticsSectionProps = {
  statistics: Record<string, number>;
};

const StatisticsSection = ({ statistics }: StatisticsSectionProps) => {
  return (
    <View style={styles.container}>
      <SectionTitle title="📊 Statistiques" />
      {Object.entries(statistics).map(([type, count]) => (
        <View key={type} style={styles.card}>
          <Text style={styles.label}>{type}</Text>
          <Text style={styles.value}>{count}</Text>
        </View>
      ))}
    </View>
  );
};

export default StatisticsSection;

const styles = StyleSheet.create({
  container: {
    padding: 15,
  },
  card: {
    backgroundColor: colors.white,
    padding: 16,
    borderRadius: radius.lg,
    marginBottom: spacing.md,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  label: {
    color: colors.textSecondary,
  },
  value: {
    fontWeight: typography.fontWeight.bold,
    color: colors.textPrimary,
  },
});