import React from 'react';
import { StyleSheet, View } from 'react-native';
import SectionTitle from '../../../shared/components/ui/SectionTitle';
import { DailyObjectiveItem } from '../types/dashboard.types';
import DailyObjectiveCard from './DailyObjectiveCard';

type DailyObjectivesSectionProps = {
  items: DailyObjectiveItem[];
};

const DailyObjectivesSection = ({ items }: DailyObjectivesSectionProps) => {
  return (
    <View style={styles.container}>
      <SectionTitle title="🎯 Objectifs journaliers" />
      {items.map((item) => (
        <DailyObjectiveCard
          key={item.label}
          label={item.label}
          target={item.target}
          done={item.done}
        />
      ))}
    </View>
  );
};

export default DailyObjectivesSection;

const styles = StyleSheet.create({
  container: {
    padding: 15,
  },
});