import React from "react";
import { api } from "@/trpc/server";
import CreateLobbyDialog from "@/app/_components/create-lobby-dialog";
import LobbyCard from "@/app/_components/lobby-card";
import { Button } from "@/components/ui/button";

async function Page() {
  const lobbies = await api.lobby.getAll();

  return (
    <>
      <div className="w-full max-w-md space-y-4">
        <div className="flex w-full gap-4">
          <CreateLobbyDialog className="grow" />
          <Button
            variant={"party"}
            size={"xxl"}
            className="container-bg bg-border/10"
          >
            Placeholder
          </Button>
        </div>

        <menu>
          {lobbies.map((lobby) => (
            <li key={lobby.id}>
              <LobbyCard lobby={lobby} />
            </li>
          ))}
        </menu>
      </div>
    </>
  );
}

export default Page;