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

import { useState, useEffect } from "react";

export default function Datetime() {
    const locale = "de";
    const [today, setDate] = useState(new Date());

    useEffect(() => {
        const timer = setInterval(() => {
            setDate(new Date());
        }, 20 * 1000);
        return () => {
            clearInterval(timer);
        };
    }, []);

    const date = today.toLocaleDateString(locale, {
        month: "long",
        day: "numeric",
        year: "numeric",
    });

    const time = today.toLocaleTimeString(locale, {
        hour: "numeric",
        hour12: false,
        minute: "numeric",
    });

    return (
        <div className={style.container}>
            <div className={style.icon}>
                <img src="src/assets/clock.png" />
            </div>
            <div className={style.textContainer}>
                <div className={style.time}>{time}</div>
                <div className={style.date}>{date}</div>
            </div>
        </div>
    );
}