import type { Metadata } from "next";
import { OnlineList } from "@/components/online-list";
import { PageHeader } from "@/components/status";
import { Card, CardContent } from "@/components/ui/card";
import { api, getMe, isModerator, unwrap } from "@/lib/api";

export const metadata: Metadata = { title: "Online" };

export default async function Online() {
  const [me, { online }] = await Promise.all([getMe(), api.online.get().then(unwrap)]);
  return (
    <>
      <PageHeader title="Online in T5DE">IMVU accounts in a T5DE client right now, that chose to show it.</PageHeader>
      <Card>
        <CardContent>
          <OnlineList initial={online} moderator={isModerator(me)} />
        </CardContent>
      </Card>
    </>
  );
}