import React from 'react';
import { StyleSheet, View } from 'react-native';
import { spacing } from '../../../theme';
import { DashboardKpi } from '../types/dashboard.types';
import DashboardKpiCard from './DashboardKpiCard';

type DashboardKpiSectionProps = {
  items: DashboardKpi[];
};

const DashboardKpiSection = ({ items }: DashboardKpiSectionProps) => {
  return (
    <View style={styles.container}>
      {items.map((item) => (
        <DashboardKpiCard
          key={item.id}
          title={item.title}
          value={item.value}
          color={item.color}
        />
      ))}
    </View>
  );
};

export default DashboardKpiSection;

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