import { Footer } from "@/components/footer";
import { Heading } from "./_components/heading";
import { AskAgentCard } from "../../_components/ask-agent-card";
import ResponseAgentCard from "../../_components/response-agent-card";
import { Header } from "@/components/header";
import { Particles } from "@/components/particles";

export default async function AgentResponse({
  params,
}: {
  params: Promise<{ agentId: string; responseId: string }>;
}) {
  const { agentId, responseId } = await params;

  return (
    <div className="relative">
      <Header />
      <Heading />
      <section>
        <div className="layout px-3 sm:px-6 py-8">
          <AskAgentCard agentId={agentId} disabled={true} />
        </div>
      </section>
      <section>
        <div className="layout px-3 sm:px-6 py-8">
          <ResponseAgentCard agentResponseId={responseId} />
        </div>
      </section>
      <Footer />
      <Particles
        className="absolute inset-0 z-0 opacity-30"
        quantity={5000}
        ease={90}
        color={"#000000"}
        refresh
      />
    </div>
  );
}
