import { createFileRoute } from "@tanstack/react-router";
import { AppShell, PageHeader } from "@/components/app-shell";
import { InstructorHome } from "@/components/instructor-home";
import { useRoleStore } from "@/lib/role-store";
import { getShellMeta } from "@/lib/server/api-core";

export const Route = createFileRoute("/coach/roster")({
  loader: () => getShellMeta(),
  component: Page,
});

function Page() {
  const meta = Route.useLoaderData();
  const email = useRoleStore((s) => s.email);
  return (
    <AppShell hold={meta.hold} unread={meta.unread} noticeCount={meta.noticeCount} inboxUnread={meta.inboxUnread}>
      <PageHeader
        kicker="Instructor"
        title="Roster"
        description="Cut or replace an athlete. Record internship or college credit. You own the students; Super Admin owns grants."
      />
      <InstructorHome email={email} section="roster" />
    </AppShell>
  );
}