lifetracker/apps/web/components/dashboard/sidebar/TimezoneDisplay.tsx

'use client';
import { useState, useEffect, use, } from "react";
import Link from "next/link";
import { format } from "date-fns";
import { TZDate } from "@date-fns/tz";
import { timezones } from '@/lib/timezones';
import { useTimezone } from "@lifetracker/shared-react/hooks/timezones";
import LoadingSpinner from "@/components/ui/spinner";
import { db } from "@lifetracker/db";
import { Button } from "@/components/ui/button";

export default function TimezoneDisplay() {

    const dbTimezone = useTimezone();
    const [timezone, setTimezone] = useState(dbTimezone);

    // Update timezone state when dbTimezone changes
    useEffect(() => {
        if (dbTimezone !== undefined) {
            setTimezone(dbTimezone);
        }
    }, [dbTimezone]);

    useEffect(() => {
        const handleTzChange = (event) => {
            setTimezone(event.detail.timezone);
        };

        window.addEventListener('timezoneUpdated', handleTzChange);

        return () => {
            window.removeEventListener('timezoneUpdated', handleTzChange);
        };
    }, []);



    if (timezone === undefined) {
        return (
            <div className="flex flex-col items-center w-full">
                <LoadingSpinner />
            </div>
        );
    }
    return (
        <div className="text-center w-full">
            <Link href="/settings/app">
                <b className="whitespace-nowrap">{format(TZDate.tz(timezone), 'MMM dd, hh:mm aa')}</b>
                <br />
                <span>in&nbsp;</span>
                <span className="whitespace-nowrap">
                    <b>{timezones[timezone]}</b>
                </span>
            </Link>
        </div>
    );
}