"use client"

import { Label } from "@/components/ui/label"
import { useWS } from "./ws-context"
import { useMap } from "./map-context"

export default function StatusBar() {

    const { wsStatus } = useWS()
    const { currentDatetime } = useMap()

    // 根据WebSocket状态返回对应颜色的圆点
    const getStatusDot = () => {
        switch (wsStatus) {
            case 'connected':
                return <div className="w-2 h-2 bg-green-500 rounded-full" title="已连接" />
            case 'connecting':
                return <div className="w-2 h-2 bg-yellow-500 rounded-full animate-pulse" title="连接中..." />
            case 'disconnected':
            default:
                return <div className="w-2 h-2 bg-red-500 rounded-full" title="连接断开" />
        }
    }

    return (
        <div className="h-8 flex items-center justify-between px-4">
            <div className="flex items-center">
                <Label className="text-xs font-bold text-muted-foreground">
                    Data Time:
                </Label>
                <Label className="ml-2 text-xs font-bold text-muted-foreground">
                    {currentDatetime?.toLocaleString()}
                </Label>
            </div>
            <div className="flex items-center">
                {getStatusDot()}
                <Label className="ml-2 text-xs font-bold text-muted-foreground">
                    {wsStatus}
                </Label>
            </div>
        </div>
    )
}