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

export const Route = createFileRoute("/donor/invites")({
  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="Donor"
        title="Game Day invites"
        description="Special sideline seats and guest passes. Member-only stadium nights stay off this list."
      />
      <DonorHome email={email} section="invites" />
    </AppShell>
  );
}