import { useState, useEffect } from "react";
import { Wifi } from "lucide-react";

export default function RealtimeIndicator() {
  const [lastUpdate, setLastUpdate] = useState(new Date());
  const [pulse, setPulse] = useState(false);

  useEffect(() => {
    const interval = setInterval(() => {
      setLastUpdate(new Date());
      setPulse(true);
      setTimeout(() => setPulse(false), 1000);
    }, 30000);
    return () => clearInterval(interval);
  }, []);

  const fmt = (d) => d.toLocaleTimeString("id-ID", { hour: "2-digit", minute: "2-digit", second: "2-digit" });

  return (
    <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
      <div className="relative flex items-center">
        <Wifi className="w-3.5 h-3.5 text-emerald-500" />
        <span className={`absolute -top-0.5 -right-0.5 w-1.5 h-1.5 bg-emerald-500 rounded-full ${pulse ? "animate-ping" : ""}`} />
      </div>
      <span className="hidden sm:inline">Live · {fmt(lastUpdate)}</span>
    </div>
  );
}