follow-button.tsx

"use client"

import { useFollow } from "./profile/hooks/use-follow"
import { Button } from "./ui/button"
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog"

export const FollowButton = ({
    userId,
    username,
    isFollowing = false,
}: {
    userId: string
    username: string
    isFollowing?: boolean
}) => {
    const followMutation = useFollow("follow")
    const unfollowMutation = useFollow("unfollow")

    return (
        <Dialog>
            {isFollowing ? (
                <Button variant="outline" size="lg" >
                    <span className="hover:hidden">Following</span>
                    <DialogTrigger>
                        <span className="hidden hover:block text-destructive border-destructive">Unfollow</span>
                    </DialogTrigger>
                </Button>
            ) : (
                <Button variant="outline" size="lg" onClick={() => followMutation.mutate({ userId })}>
                    Follow
                </Button>
            )}
            <DialogContent>
                <DialogHeader>
                    <DialogTitle>Unfollow @{username}?</DialogTitle>
                    <DialogDescription>
                        Their Gweets will no longer show up in your home timeline.
                        You can still view their profile, unless their Tweets are protected.
                    </DialogDescription>
                </DialogHeader>
                <DialogFooter>
                    <Button type="submit" onClick={() => unfollowMutation.mutate({ userId })}>
                        Unfollow
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    )
}