import { useFetchFollowingCountByUserId } from "@replyke/react-js";

function UserFollowingCounter({ targetUserId }: { targetUserId: string }) {
  const fetchFollowingCountByUserId = useFetchFollowingCountByUserId();

  const getUserFollowingCount = async () => {
    try {
      const result = await fetchFollowingCountByUserId({ userId: targetUserId });
      console.log(`This user is following ${result.count} people`);
    } catch (error) {
      console.error("Failed to fetch user following count:", error.message);
    }
  };

  return <button onClick={getUserFollowingCount}>Check User's Following</button>;
}

import { useFetchFollowingCountByUserId } from "@replyke/react-js";
import { useState, useEffect } from "react";

function UserProfileStats({ userId, username }: { userId: string; username: string }) {
  const fetchFollowingCountByUserId = useFetchFollowingCountByUserId();
  const [followingCount, setFollowingCount] = useState<number | null>(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!userId) return;

    const loadCount = async () => {
      setLoading(true);
      try {
        const result = await fetchFollowingCountByUserId({ userId });
        setFollowingCount(result.count);
      } catch (error) {
        console.error("Failed to load following count:", error);
        setFollowingCount(0);
      } finally {
        setLoading(false);
      }
    };

    loadCount();
  }, [userId, fetchFollowingCountByUserId]);

  return (
    <div className="user-profile-stats">
      <h3>{username}</h3>
      <div className="stats">
        {loading ? (
          <span>Loading...</span>
        ) : (
          <>
            <span className="count">{followingCount?.toLocaleString() ?? 0}</span>
            <span className="label">Following</span>
          </>
        )}
      </div>
    </div>
  );
}