"use client"

import { useEffect, useState } from "react"
import { Marker } from "react-map-gl/mapbox"

interface TimeZoneMarker {
  name: string
  offset: number
  longitude: number
  latitude: number
}

const TIME_ZONES: TimeZoneMarker[] = [
  { name: "WIB", offset: 7, longitude: 106.8456, latitude: -6.2088 }, // Jakarta
  { name: "WITA", offset: 8, longitude: 115.1889, latitude: -8.4095 }, // Denpasar
  { name: "WIT", offset: 9, longitude: 140.7887, latitude: -2.5916 }, // Jayapura
]

export default function TimeZonesDisplay() {
  const [currentTimes, setCurrentTimes] = useState<Record<string, string>>({})

  useEffect(() => {
    const updateTimes = () => {
      const now = new Date()
      const times: Record<string, string> = {}

      TIME_ZONES.forEach((zone) => {
        const localTime = new Date(now.getTime())
        localTime.setHours(now.getUTCHours() + zone.offset)
        
        const hours = localTime.getHours().toString().padStart(2, "0")
        const minutes = localTime.getMinutes().toString().padStart(2, "0")
        const seconds = localTime.getSeconds().toString().padStart(2, "0")
        
        times[zone.name] = `${hours}:${minutes}:${seconds}`
      })

      setCurrentTimes(times)
    }

    // Update immediately and then every second
    updateTimes()
    const interval = setInterval(updateTimes, 1000)

    return () => clearInterval(interval)
  }, [])

  return (
    <>
      {TIME_ZONES.map((zone) => (
        <Marker key={zone.name} longitude={zone.longitude} latitude={zone.latitude}>
          <div className="relative group">
            <div className="absolute -translate-x-1/2 -translate-y-full mb-2 pointer-events-none">
              <div className="bg-black/80 text-white px-2 py-1 rounded-md text-xs font-mono">
                <div className="text-center font-bold">{zone.name}</div>
                <div className="digital-clock">{currentTimes[zone.name] || "00:00:00"}</div>
                <div className="text-center text-xs text-gray-300">GMT+{zone.offset}</div>
              </div>
            </div>
          </div>
        </Marker>
      ))}
    </>
  )
}
