"use client";

import { useTranslations } from "next-intl";
import { useEffect, useState } from "react";
import { useEventSource } from "@/lib/use-event-source";

/**
 * Live online user counter. Subscribes to the SSE online-count stream so the
 * displayed count updates in real-time (multicast) instead of only reflecting
 * the server-rendered value at page load.
 */
export function LiveOnlineCount({
	initial,
	hotelName,
}: {
	initial: number;
	hotelName: string;
}) {
	const t = useTranslations("header");
	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 <>{t("online", { count, hotel: hotelName })}</>;
}