import dynamic from "next/dynamic";
import { Loading } from "@/components/ui/loading";

const TeamRepsOverviewPage = dynamic<{ teamId: string }>(
  () => import("@/components/sales-targets/team-reps-overview-page"),
  {
    loading: () => (
      <Loading
        variant="api"
        layout="page"
        message="Loading team reps..."
      />
    ),
  },
);

export const metadata = {
  title: "Team Reps | Jumppace CRM",
  description: "View team reps stats and KPIs.",
};

export default async function Page({ params }: { params: Promise<{ teamId: string }> }) {
  const { teamId } = await params;
  return <TeamRepsOverviewPage teamId={teamId} />;
}