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

function UnfollowButton({ followId }: { followId: string }) {
  const unfollowByFollowId = useUnfollowByFollowId();

  const handleUnfollow = async () => {
    try {
      await unfollowByFollowId({ followId });
      console.log("Successfully unfollowed the user.");
    } catch (error) {
      console.error("Failed to unfollow user:", error.message);
    }
  };

  return <button onClick={handleUnfollow}>Unfollow</button>;
}

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

function FollowingListItem({
  followId,
  username,
  onUnfollowSuccess
}: {
  followId: string;
  username: string;
  onUnfollowSuccess?: (followId: string) => void;
}) {
  const unfollowByFollowId = useUnfollowByFollowId();
  const [isUnfollowing, setIsUnfollowing] = useState(false);

  const handleUnfollow = async () => {
    setIsUnfollowing(true);
    try {
      await unfollowByFollowId({ followId });
      console.log(`Successfully unfollowed ${username}`);
      onUnfollowSuccess?.(followId);
    } catch (error) {
      console.error(`Failed to unfollow ${username}:`, error);
      alert("Failed to unfollow. Please try again.");
    } finally {
      setIsUnfollowing(false);
    }
  };

  return (
    <div className="following-item">
      <span className="username">{username}</span>
      <button
        onClick={handleUnfollow}
        disabled={isUnfollowing}
        className="unfollow-btn"
      >
        {isUnfollowing ? "Unfollowing..." : "Unfollow"}
      </button>
    </div>
  );
}

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

function UnfollowWithConfirmation({
  followId,
  username
}: {
  followId: string;
  username: string;
}) {
  const unfollowByFollowId = useUnfollowByFollowId();
  const [showConfirm, setShowConfirm] = useState(false);
  const [isUnfollowing, setIsUnfollowing] = useState(false);

  const confirmUnfollow = async () => {
    setIsUnfollowing(true);
    try {
      await unfollowByFollowId({ followId });
      setShowConfirm(false);
      console.log(`Unfollowed ${username} successfully`);
    } catch (error) {
      console.error("Failed to unfollow:", error);
    } finally {
      setIsUnfollowing(false);
    }
  };

  return (
    <>
      <button onClick={() => setShowConfirm(true)}>Unfollow</button>

      {showConfirm && (
        <div className="confirm-dialog">
          <p>Are you sure you want to unfollow {username}?</p>
          <button
            onClick={confirmUnfollow}
            disabled={isUnfollowing}
          >
            {isUnfollowing ? "Unfollowing..." : "Yes, Unfollow"}
          </button>
          <button onClick={() => setShowConfirm(false)}>Cancel</button>
        </div>
      )}
    </>
  );
}