import React, { useState } from 'react';
import { Button } from '@/components/ui/button';
import { UserPlus, UserCheck, Loader2 } from 'lucide-react';

interface FollowButtonProps {
  userId: string;
  initialFollowing?: boolean;
  initialFollowerCount?: number;
  onFollowChange?: (isFollowing: boolean) => void;
}

export function FollowButton({ 
  userId, 
  initialFollowing = false, 
  initialFollowerCount = 0,
  onFollowChange 
}: FollowButtonProps) {
  const [following, setFollowing] = useState(initialFollowing);
  const [followerCount, setFollowerCount] = useState(initialFollowerCount);
  const [isUpdating, setIsUpdating] = useState(false);

  const handleClick = async () => {
    if (isUpdating) return;

    setIsUpdating(true);
    const newFollowing = !following;

    try {
      // TODO: Call API to follow/unfollow
      setFollowing(newFollowing);
      setFollowerCount(prev => newFollowing ? prev + 1 : prev - 1);
      onFollowChange?.(newFollowing);
    } catch (error) {
      console.error('Failed to toggle follow:', error);
    } finally {
      setIsUpdating(false);
    }
  };

  return (
    <Button
      onClick={handleClick}
      disabled={isUpdating}
      variant={following ? 'outline' : 'default'}
      className="min-w-[100px]"
    >
      {isUpdating ? (
        <Loader2 className="h-4 w-4 animate-spin mr-2" />
      ) : following ? (
        <>
          <UserCheck className="h-4 w-4 mr-2" />
          Following
        </>
      ) : (
        <>
          <UserPlus className="h-4 w-4 mr-2" />
          Follow
        </>
      )}
    </Button>
  );
}

