import { useEffect, useState } from "react";

import clockImage from "/img/clock.png";

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

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 hour = today.getHours().toString().padStart(2, "0");
    const minute = today.getMinutes().toString().padStart(2, "0");

    return (
        <div className={style.container}>
            <div className={style.icon}>
                <img src={clockImage} alt="Clock" />
            </div>
            <div className={style.textContainer}>
                <div className={style.time}>
                    {hour}
                    <span className={style.divider}>:</span>
                    {minute}
                </div>
                <div className={style.date}>{date}</div>
            </div>
        </div>
    );
}