import { useEffect } from "react";
import { useWeatherStore } from "@/store/weather";

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

export default function Weather() {
    const weatherData = useWeatherStore((state) => state.weatherData);
    const fetchWeatherData = useWeatherStore((state) => state.fetchWeatherData);

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

    if (!weatherData.current) {
        return <div>Loading...</div>;
    }

    return (
        <div className={styles.weatherContainer}>
            <div className={styles.currentTemperature}>
                <img
                    src={weatherData.current.icon}
                    alt={weatherData.current.weather_description}
                />
                <span>{weatherData.current.temperature_2m.toFixed(1)}°C</span>
            </div>
            <div className={styles.dailyTemperatures}>
                <span className={styles.minTemperature}>
                    {weatherData.daily.temperature_2m_min[0].toFixed(1)}°C
                </span>
                <span className={styles.maxTemperature}>
                    {weatherData.daily.temperature_2m_max[0].toFixed(1)}°C
                </span>
            </div>
        </div>
    );
}