import { user } from "./routes";
import { userById } from "./resources/user";
import { currentUser } from "./resources/current-user";
export default function UserPage() {
// user.useParams() works in RSC! The server version reads params from the
// HTTP context and validates them via the Zod schema in routes.ts.
const params = user.useParams();
// Resource .use() — suspense-integrated data fetching.
// The loader runs on the server (bound in resources/user.ts).
// "use cache" on the loader means subsequent calls return cached data.
const userData = params ? userById.use({ id: params.id }) : null;
const me = currentUser.use();
return (
<div>
<h2>User Page</h2>
<p>
This is a <strong>server component</strong> that uses{" "}
<code>user.useParams()</code> for route params and{" "}
<code>userById.use()</code> for resource data fetching.
</p>
{params && userData ? (
<>
<p>
User ID: <strong>{params.id}</strong>
</p>
<p data-testid="user-name">
Name: <strong>{userData.name}</strong>
</p>
<p data-testid="user-email">
Email: <strong>{userData.email}</strong>
</p>
<p
data-testid="current-user"
style={{ color: "gray", fontSize: "0.85rem" }}
>
Logged in as: {me.name} ({me.role})
{me.id === userData.id && " (that's you!)"}
</p>
</>
) : (
<p style={{ color: "red" }}>No match or validation failed</p>
)}
<h3>Navigate to other users:</h3>
<div style={{ display: "flex", gap: "0.5rem" }}>
{[1, 2, 42, 99, "NaN"].map((id) => (
<user.Link
key={id}
params={{ id: Number(id) }}
style={{ color: "blue" }}
>
User {id}
</user.Link>
))}
</div>
<p style={{ color: "gray", fontSize: "0.85rem", marginTop: "1rem" }}>
Rendered at: {new Date().toLocaleTimeString()}
</p>
</div>
);
}