import Image from "next/image";
import Link from "next/link";
import FollowButton from "./following-button";

// this is a single user helper-component, only for design purposes
export default function FollowUser({ id, followId, userName, image }: { id: number, followId: number, userName: string, image: { url: string } }) {
    return (
        <div>
            <Link href={`/user/${id}`}>
                <div className="">
                    <Image
                        src={image.url}
                        alt={userName}
                        width={50}
                        height={50}
                        priority={true} />
                </div>
                <p>{userName}</p>
                <FollowButton userId={id} followerId={followId} />
            </Link>
        </div>
    )
}