lifetracker/apps/web/components/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 '@lifetracker/shared/utils/timezones';
import LoadingSpinner from "@/components/ui/spinner";
import { db } from "@lifetracker/db";
import { Button } from "@/components/ui/button";
import spacetime from "spacetime";
import { useTimezone } from "@/lib/userLocalSettings/client";



export default function TimezoneDisplay() {
    const timezone = useTimezone();
    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] || "Unknown Timezone"}
                    </b>
                </span>
            </Link>
        </div>
    );
}

// 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>
//     );
// }