import { useState, useContext } from "react";
import Event from "./components/Event/Event.jsx";
import styles from "./EventsPage.module.css";
import ToolBar from "../../components/ToolBar/ToolBar.jsx";
import filter from "../../utils/filter.js";
import { EventContext } from "../../contexts/events/EventContext.js";


function EventsPage(){

    const { events } = useContext(EventContext);

    const [filters, setFilters] = useState({
        alphabetical: "asc",
        yearOrder: "desc",
    });
    
    return (
        <div className={styles.eventsContainer}>
            <ToolBar setFilters={setFilters} filters={filters} />
            <div className={styles.eventsList}>
                {filter(events, filters, "event").map((event, index) => (
                    <Event key={index} event={event} />
                ))}
            </div>
        </div>
    )
}

export default EventsPage;