import { House } from "lucide-react";

import AppBreadcrumb from "@/components/generic/Breadcrumb/AppBreadcrumb";
import GroupTable from "../../components/user_groups/GroupTable";

export default function GroupList() {
  const items = [
    { label: "Home", icon: <House className="size-4" />, to: `/admin/users` },
    { label: "User Groups" },
  ]

  return (
    <section className="bg-muted/60 h-full">
      <div className="lg:container lg:mx-auto lg:px-0 flex flex-col items-start px-4">
        <div className="flex flex-col gap-2 my-6 ">
          <AppBreadcrumb items={items} />
        </div>

        <div className="w-full">
          <GroupTable />
        </div>
      </div>
    </section>
  )
}