import { useEffect } from "react";
import DepartureList from "@/components/DepartureList/DepartureList";
import { useKVVStore } from "@/store/kvv";

import style from "./style.module.css";

export default function Timetable() {
    const fetchTimetable = useKVVStore((state) => state.fetch);
    const pStreet = useKVVStore((state) => state.pStreet);
    const hStreet = useKVVStore((state) => state.hStreet);

    useEffect(() => {
        fetchTimetable();
        const interval = setInterval(() => {
            fetchTimetable();
        }, 60000);
        return () => clearInterval(interval);
    }, [fetchTimetable]);

    return (
        <div className={style.container}>
            <h1>Departures</h1>
            <DepartureList
                departures={pStreet.departureList}
                name="Philippstraße"
            />
            <DepartureList
                departures={hStreet.departureList}
                name="Händelstraße"
            />
        </div>
    );
}