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

type ExpenseObjectivesSectionProps = {
  items: ExpenseObjectiveItem[];
};

const ExpenseObjectivesSection = ({ items }: ExpenseObjectivesSectionProps) => {
  return (
    <View style={styles.container}>
      <SectionTitle title="Objectifs de visite" />
      {items.map((item) => (
        <ExpenseObjectiveCard key={item.type} item={item} />
      ))}
    </View>
  );
};

export default ExpenseObjectivesSection;

const styles = StyleSheet.create({
  container: {
    marginBottom: spacing.xl,
  },
});