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

function UserFollowersCounter({ targetUserId }: { targetUserId: string }) {
  const fetchFollowersCountByUserId = useFetchFollowersCountByUserId();

  const getUserFollowersCount = async () => {
    try {
      const result = await fetchFollowersCountByUserId({ userId: targetUserId });
      console.log(`This user has ${result.count} followers`);
    } catch (error) {
      console.error("Failed to fetch user followers count:", error.message);
    }
  };

  return <button onClick={getUserFollowersCount}>Check User's Followers</button>;
}

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

function UserStatsCard({ userId, username }: { userId: string; username: string }) {
  const fetchFollowersCountByUserId = useFetchFollowersCountByUserId();
  const [followersCount, setFollowersCount] = useState<number | null>(null);
  const [loading, setLoading] = useState(false);

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

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

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

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