import dynamic from "next/dynamic";

const ResourcesClient = dynamic(
  () => import("./ResourcesClient.js").then((m) => m.ResourcesClient),
  {
    loading: () => (
      <div className="p-6 space-y-4">
        <div className="h-8 w-48 shimmer-skeleton rounded" />
        <div className="h-10 w-full shimmer-skeleton rounded" />
        <div className="space-y-2">
          {[...Array(10)].map((_, i) => (
            <div
              key={i}
              className="flex items-center gap-3 px-4 py-3 animate-row-enter"
              style={{ animationDelay: `${i * 50}ms` }}
            >
              <div className="h-8 w-8 rounded-full shimmer-skeleton flex-shrink-0" />
              <div className="h-4 w-32 shimmer-skeleton rounded" />
              <div className="h-3 w-48 shimmer-skeleton rounded" />
            </div>
          ))}
        </div>
      </div>
    ),
  },
);

export default function ResourcesPage() {
  return <ResourcesClient />;
}
