import { usePathname } from "next/navigation";
import ProfileCard from "../_components/docEmailForm";
import EmailForm from "../_components/clientDocCard";
import { api } from "@/trpc/server";

export default async function Page() {
const docId = usePathname();
const doc = await api.doc.hello.query({ text: docId });
return (
<main className="flex min-h-screen flex-col items-center bg-gradient-to-b from-white to-gray-300 text-gray-800">
<h1 className="mt-8 text-5xl font-extrabold tracking-tight sm:text-[5rem]">
Elite <span className="text-[hsl(0,100%,50%)]">Financial</span>
</h1>
<p className="my-1 mb-3 w-[30rem] text-center text-lg">
Pleas sign at earliest convience. This will insure you maintain your
coverage incase of emergency{" "}
</p>
<div className="flex flex-grow flex-col items-center justify-center gap-12 px-4 pb-32">
{doc && <ProfileCard doc={doc} />}
{/* <EmailForm docId={docId} /> */}
</div>
</main>
);
}
I want to also use a mutation cant get it to work says this error
You're importing a component that needs next/headers. That only works in a Server Component but one of its parents is marked with "use client", so it's a Client Component.
Learn more: https://nextjs.org/docs/getting-started/react-essentials

how can i query and use mutation and use slug on same page