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

export const Route = createFileRoute("/learn/calendar")({
  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="Student"
        title="Game days"
        description="Studio sessions and stadium nights on the league calendar."
      />
      <StudentHome email={email} section="calendar" />
    </AppShell>
  );
}