import { useEffect, useState } from "preact/hooks";

const dateTimeFormat = new Intl.DateTimeFormat();
const timezoneId = Temporal.Now.timeZoneId();

export function Time() {
    const [time, setTime] = useState(Temporal.Now.instant().toZonedDateTimeISO(timezoneId))

    useEffect(() => {
        const id = setInterval(() => {
            setTime(time => time.add({ seconds: 1 }));
        }, 1000)

        return () => {
            clearInterval(id);
        }
    }, [])

    return <div id="time">
        <div>{dateTimeFormat.format(time.toPlainTime())}</div>
        <div>{dateTimeFormat.format(time.toPlainDate())}</div>
    </div>
}