"use client";

import { Server, User } from "revolt-api";
import { ListCompactor } from "../common/ListCompactor";
import { UserCard } from "../cards/UserCard";
import { ServerCard } from "../cards/ServerCard";
import Link from "next/link";

export function RelevantObjects({
  users,
  servers,
  userId,
}: {
  users: User[];
  servers: Server[];
  userId: string;
}) {
  return (
    <div className="flex gap-2">
      <div className="flex-1 min-w-0 flex flex-col gap-2">
        <h2 className="text-md text-center pb-2">Bots & Friends</h2>
        <ListCompactor
          data={users}
          Component={({ item }) => (
            <Link href={`/panel/inspect/user/${item._id}`}>
              <UserCard user={item} subtitle="" />
            </Link>
          )}
        />
      </div>
      <div className="flex-1 min-w-0 flex flex-col gap-2">
        <h2 className="text-md text-center pb-2">Servers</h2>
        <ListCompactor
          data={servers}
          Component={({ item }) => (
            <Link href={`/panel/inspect/server/${item._id}`}>
              <ServerCard
                server={item}
                subtitle={userId === item.owner ? "Server Owner" : ""}
              />
            </Link>
          )}
        />
      </div>
    </div>
  );
}