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

function UserFollowersList({ targetUserId }: { targetUserId: string }) {
  const fetchFollowersByUserId = useFetchFollowersByUserId();

  const loadUserFollowers = async () => {
    try {
      const result = await fetchFollowersByUserId({
        userId: targetUserId,
        page: 1,
        limit: 15
      });

      console.log(`${result.pagination.totalCount} users follow this person`);
      result.followers.forEach(follower => {
        console.log(`${follower.user.username} - Follow ID: ${follower.followId}`);
      });
    } catch (error) {
      console.error("Failed to fetch user followers:", error.message);
    }
  };

  return <button onClick={loadUserFollowers}>View Followers</button>;
}

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

function FollowersGrid({ userId }: { userId: string }) {
  const fetchFollowersByUserId = useFetchFollowersByUserId();
  const [followersData, setFollowersData] = useState<FollowersResponse | null>(null);
  const [loading, setLoading] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);

  useEffect(() => {
    const loadFollowers = async () => {
      if (!userId) return;

      setLoading(true);
      try {
        const result = await fetchFollowersByUserId({
          userId,
          page: currentPage,
          limit: 12
        });
        setFollowersData(result);
      } catch (error) {
        console.error("Failed to load followers:", error);
      } finally {
        setLoading(false);
      }
    };

    loadFollowers();
  }, [userId, currentPage, fetchFollowersByUserId]);

  return (
    <div>
      {loading ? (
        <div>Loading followers...</div>
      ) : (
        <>
          <h3>
            {followersData?.pagination.totalCount || 0} Followers
          </h3>

          <div className="followers-grid">
            {followersData?.followers.map(follower => (
              <div key={follower.followId}>
                <h4>{follower.user.username}</h4>
                <small>Followed: {new Date(follower.followedAt).toLocaleDateString()}</small>
              </div>
            ))}
          </div>

          {followersData && followersData.pagination.totalPages > 1 && (
            <div className="pagination">
              <button
                disabled={!followersData.pagination.hasPreviousPage}
                onClick={() => setCurrentPage(prev => prev - 1)}
              >
                Previous
              </button>

              <span>
                Page {followersData.pagination.currentPage} of {followersData.pagination.totalPages}
              </span>

              <button
                disabled={!followersData.pagination.hasNextPage}
                onClick={() => setCurrentPage(prev => prev + 1)}
              >
                Next
              </button>
            </div>
          )}
        </>
      )}
    </div>
  );
}