import dynamic from "next/dynamic";

const SystemRolesClient = dynamic(
  () => import("~/components/admin/SystemRolesClient.js").then((m) => m.SystemRolesClient),
  {
    loading: () => (
      <div className="p-6 space-y-4 max-w-4xl mx-auto">
        <div className="h-8 w-48 shimmer-skeleton rounded" />
        <div className="space-y-3">
          {[...Array(5)].map((_, i) => (
            <div key={i} className="h-24 w-full shimmer-skeleton rounded-xl animate-row-enter" style={{ animationDelay: `${i * 50}ms` }} />
          ))}
        </div>
      </div>
    ),
  },
);

export default function SystemRolesPage() {
  return <SystemRolesClient />;
}
