import React, { useContext } from "react";
import styles from "./IncompleteEvent.module.css";
import { EventContext } from "../../../../contexts/Events/EventContext.js";

function IncompleteEvent() {

    const { events } = useContext(EventContext);

    return (
        <div className={`${styles.rightBlock} glassCard`}>
            <h2>Derniers événements</h2>
            <div className={styles.eventsContainer}>
                {events.map((event) => (
                    <div key={event.id} className={`glassCard ${styles.eventCard}`}>
                        <h3>{event.name}</h3>
                        <p className={styles.eventDate}>
                            {new Date(event.start).toLocaleDateString("fr-FR")} - {new Date(event.end).toLocaleDateString("fr-FR")}
                        </p>
                        <p className={styles.eventDescription}>{event.description}</p>
                        <h4>Tâches associées :</h4>
                        <ul className={styles.tasksList}>
                            {event.tasks?.length ? (
                                event.tasks.map((task, taskIndex) => (
                                    <li key={taskIndex}>{task.name}</li>
                                ))
                            ) : (
                                <li>Aucune tâche associée.</li>
                            )}
                        </ul>
                    </div>
                ))}
            </div>
        </div>
    );
}

export default IncompleteEvent;