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

function MyFollowersCounter() {
  const fetchFollowersCount = useFetchFollowersCount();

  const getMyFollowersCount = async () => {
    try {
      const result = await fetchFollowersCount();
      console.log(`You have ${result.count} followers`);
    } catch (error) {
      console.error("Failed to fetch followers count:", error.message);
    }
  };

  return <button onClick={getMyFollowersCount}>Check My Followers</button>;
}

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

function FollowersCountDisplay() {
  const fetchFollowersCount = useFetchFollowersCount();
  const [count, setCount] = useState<number | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const loadCount = async () => {
      setLoading(true);
      setError(null);
      try {
        const result = await fetchFollowersCount();
        setCount(result.count);
      } catch (err) {
        setError(err instanceof Error ? err.message : 'Failed to load count');
      } finally {
        setLoading(false);
      }
    };

    loadCount();
  }, [fetchFollowersCount]);

  if (loading) return <div>Loading followers count...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div className="followers-count">
      <h3>{count ?? 0}</h3>
      <p>Followers</p>
    </div>
  );
}

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

function ProfileStats() {
  const fetchFollowersCount = useFetchFollowersCount();
  const [stats, setStats] = useState({ followers: 0 });

  useEffect(() => {
    const loadStats = async () => {
      try {
        const followersResult = await fetchFollowersCount();
        setStats(prev => ({ ...prev, followers: followersResult.count }));
      } catch (error) {
        console.error("Failed to load profile stats:", error);
      }
    };

    loadStats();
  }, [fetchFollowersCount]);

  return (
    <div className="profile-stats">
      <div className="stat-item">
        <span className="stat-number">{stats.followers.toLocaleString()}</span>
        <span className="stat-label">Followers</span>
      </div>
    </div>
  );
}