import { useMemo } from "react";
import styles from "./eventList.module.css";
import EventItem from "./eventItem.jsx";
import { EventContext } from "../../../../contexts/events/EventContext.js";
import { useContext } from "react";


function EventList() {

    const { events } = useContext(EventContext);

    const sortedEvents = useMemo(() => {
        return [...events].sort(
            (a, b) => new Date(a.start) - new Date(b.start)
        );
    }, [events]);


    return (
        <div className={`${styles.glassCard} glassCard`}>
                <h2>Liste des événements à venir</h2>
                {sortedEvents.length > 0 ? (
                    <div className={styles.eventList}>
                        {sortedEvents.map((eventGroup, index) => (
                            <EventItem eventGroup={eventGroup} key={index} />
                        ))}
                    </div>
                ) : (
                    <p>Aucun événement planifié pour l'instant.</p>
                )}
        </div>

    );
}

export default EventList;