import { useEffect, useState } from "react";
import Event from "../../components/Event/Event.jsx";
import styles from "./EventsPage.module.css";
import ToolBar from "../../components/ToolBar/ToolBar.jsx";
import getAllEvents from "../../utils/event/getAllEvents.js";
import filter from "../../utils/filter.js";


function EventsPage(){
    const [filters, setFilters] = useState({
        alphabetical: "asc",
        yearOrder: "desc",
    });


    const [events, setEvents] = useState([]);



    useEffect(() => {
        (async () => {
            const data = await getAllEvents();
            setEvents(data.data);
        }) ()
    }, []);


    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;