import { Users } from "lucide-react";

import { ListPageCard } from "@/app/dashboard/_components";
import { ErrorBanner } from "@/components/shared/error-banner";

import { UsersHeaderActions, UsersTable } from "./_components/users-table";
import { fetchBackendUsers } from "./_lib/users-server-api";

export default async function AdminsUsersPage() {
  const { users, errorMessage } = await fetchBackendUsers();

  return (
    <ListPageCard
      icon={Users}
      title="Users"
      breadcrumb={[{ label: "Admins & Access" }, { label: "Users" }]}
      actions={<UsersHeaderActions data={users} />}
    >
      <ErrorBanner message={errorMessage} className="mb-4" />
      <UsersTable data={users} />
    </ListPageCard>
  );
}