import { useEffect } from "react";
import { useHomeAssistantStore } from "@/store/homeAssistant";

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

export default function Timetable() {
    const fetchHomeAssistantData = useHomeAssistantStore(
        (state) => state.fetch,
    );
    const tentTemperature = useHomeAssistantStore(
        (state) => state.tentTemperature,
    );
    const tentHumidity = useHomeAssistantStore((state) => state.tentHumidity);

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

    return (
        <div>
            <div className={style.cardContainer}>
                <div className={style.card}>
                    <h4>Temperature</h4>
                    <p>{tentTemperature}°C</p>
                </div>

                <div className={style.card}>
                    <h4>Humidity</h4>
                    <p>{tentHumidity}%</p>
                </div>
            </div>
        </div>
    );
}