import { api } from "@/trpc/server";
import type { User } from "next-auth";
import { notFound } from "next/navigation";
import React from "react";
import UserCard from "@/components/user-card";
import type { PublicUser } from "@/server/auth/config";
async function Page({
  params,
}: {
  params: Promise<{
    id: string;
  }>;
}) {
  const session = { user: {} as User }; //await auth();
  const { id } = await params;
  const lobby = await api.lobby.get({ id });
  if (!lobby) return notFound();

  const members: Array<{ leader: boolean } & PublicUser> = [
    { ...lobby.leader, leader: true },
    ...(lobby?.members?.map(({ user }) => ({ ...user, leader: false })) ?? []),
  ];
  return (
    <div>
      <h1 className="text-2xl font-bold capitalize">{lobby.name}</h1>
      <ul>
        {members?.map((member) => (
          <li>
            <UserCard name={member.name!} image={member.image!}>
              {member?.leader && <label>Leader</label>}
            </UserCard>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default Page;