import React from 'react';
import { StyleSheet, View } from 'react-native';
import SectionTitle from '../../../shared/components/ui/SectionTitle';
import { spacing } from '../../../theme';
import { ExpenseStatItem } from '../types/expenses.types';
import ExpenseStatCard from './ExpenseStatCard';

type ExpenseStatsGridProps = {
  items: ExpenseStatItem[];
};

const ExpenseStatsGrid = ({ items }: ExpenseStatsGridProps) => {
  return (
    <View style={styles.container}>
      <SectionTitle title="Répartition par catégorie" />
      <View style={styles.grid}>
        {items.map((item) => (
          <ExpenseStatCard key={item.label} item={item} />
        ))}
      </View>
    </View>
  );
};

export default ExpenseStatsGrid;

const styles = StyleSheet.create({
  container: {
    marginBottom: spacing.lg,
  },
  grid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
  },
});