import { RolesListContainer } from "@/components/dashboard/roles";
import { PageHeader } from "@/components/layout/page-header";
import { getTranslations } from "next-intl/server";
import { Plus } from "lucide-react";

export default async function RolesPage() {
  const t = await getTranslations();

  return (
    <div className="flex flex-col ">
      <PageHeader
        title={t("roles.title")}
        breadcrumbs={[
          { label: t("dashboard.home"), href: "/" },
          { label: t("roles.title") },
        ]}
        action={{
          label: t("roles.createRole"),
          icon: <Plus className="h-5 w-5" />,
          href: "/roles/new",
          actionKey: "roles.create",
        }}
      />

      <RolesListContainer showHeader={false} />
    </div>
  );
}