"use client";

import { UsersIcon } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { useVisitorPresence } from "@/hooks/use-presence";

export function VisitorPresence({ guideId }: { guideId?: string }) {
  const counts = useVisitorPresence(guideId ?? null);
  return (
    <div className="flex items-center gap-1" aria-live="polite">
      <Badge
        variant="secondary"
        className=" tabular-nums"
        title="ผู้เข้าชมทั้งหมดที่กำลังออนไลน์"
      >
        <UsersIcon data-icon="inline-start" />
        ทั้งหมด {counts?.global ?? "-"}
      </Badge>
      {guideId ? (
        <Badge
          variant="outline"
          className=" tabular-nums"
          title="ผู้เข้าชม Guide นี้ที่กำลังออนไลน์"
        >
          ไกด์นี้ {counts?.guide ?? "-"}
        </Badge>
      ) : null}
    </div>
  );
}