"use client";

import { useEffect, useState } from "react";
import { AnimatedCounter } from "@/components/animated-counter";
import { useEventSource } from "@/lib/use-event-source";

/**
 * Live animated online-count number. Subscribes to the SSE online-count stream
 * so the stat updates in real-time (multicast) instead of only the initial SSR
 * value, while keeping the entrance counter animation.
 */
export function LiveOnlineCounter({
	initial,
	suffix = "",
}: {
	initial: number;
	suffix?: string;
}) {
	const [count, setCount] = useState(initial);

	const { data: onlineStream } = useEventSource<{ count: number }>(
		"/api/online/count/stream",
		{ enabled: true },
	);
	useEffect(() => {
		if (onlineStream && typeof onlineStream.count === "number") {
			setCount(onlineStream.count);
		}
	}, [onlineStream]);

	return <AnimatedCounter value={count} suffix={suffix} />;
}