import { GlobalLayout } from "@/components/global-layout"
import { UserAvatar } from "@/components/user-avatar"
import { db } from "@/lib/db"
import { User } from "@prisma/client"
import Link from "next/link"

export default async function UserFollowers({ params }: { params: { userid: string } }) {

    const fullUser = await db.user.findFirst({
        where: {
            username: params.userid
        },
        include: {
            following: true,
            followers: true
        }
    })

    const followers = await db.user.findMany({
        where: {
            following: {
                every: {
                    followerId: { not: undefined }
                }
            },
            followers: {
                every: {
                    followingId: fullUser?.id
                }
            }
        }
    })

    return (
        <GlobalLayout
            mainContent={
                <div className="flex flex-col w-full">
                    {followers?.map((follower: User) => (
                        <div className="flex items-center space-y-6" key={follower.id}>
                            <Link href={`/${follower.username}`} className="flex flex-row">
                                <UserAvatar
                                    user={{ username: follower.username, image: follower.image }}
                                    className="h-10 w-10"
                                />

                                <div className="flex flex-col ml-3">
                                    <span className="font-bold">{follower.name}</span>
                                    <span className="text-sky-500 text-sm">@{follower.username}</span>
                                </div>
                            </Link>

                            <div className="ml-auto">
                                {/* Followbutton */}
                            </div>
                        </div>
                    ))}
                </div>
            }
        />
    )
}