import React from "react";
import GroupFormDrawer from "@/app/_components/group/group-form-drawer";
import Header from "@/components/header";
import Section from "@/components/section";
import { api } from "@/trpc/server";
import Link from "next/link";
import GroupCard from "@/app/_components/group/group-card";

export default async function Page() {
  const groups = await api.group.getAll({
    withMembers: true,
  });
  return (
    <>
      <Header text="Groups">
        <GroupFormDrawer />
      </Header>
      <Section>
        <menu className="space-y-4">
          {groups.map((group) => (
            <li key={group.id}>
              <Link href={`/group/${group.id}`}>
                <GroupCard group={group} />
              </Link>
            </li>
          ))}
        </menu>
      </Section>
    </>
  );
}