src/app/search/web/page.jsx

import { useEffect, useState } from "react";
import openai from 'openai';
import WebSearchResults from "@/components/WebSearchResults";
import Link from "next/link";

openai.setApiKey(process.env.OPENAI_API_KEY);

export default function WebSearchPage({ searchParams }) {
  const [results, setResults] = useState(null);
  const [aiResponse, setAiResponse] = useState(null);
  const startIndex = searchParams.start || "1";

  useEffect(() => {
    async function fetchData() {
      const response = await fetch(
        `https://www.googleapis.com/customsearch/v1?key=${process.env.API_KEY}&cx=${process.env.CONTEXT_KEY}&q=${searchParams.searchTerm}&start=${startIndex}`
      );
  
      if (!response.ok) {
        console.log(response);
        throw new Error("Something went wrong");
      }
  
      const data = await response.json();
      setResults(data.items);

      const aiPrompt = `You're creating a search engine experience. You got the following search results for the term "${searchParams.searchTerm}": ${JSON.stringify(data.items)}. How can you present these results in a helpful way?`;

      const aiRes = await openai.Completion.create({
        prompt: aiPrompt,
        max_tokens: 100,
      });

      setAiResponse(aiRes.choices[0].text);
    }

    fetchData();
  }, [searchParams, startIndex]);

  if (!results) {
    return (
      <div className="flex flex-col justify-center items-center pt-10">
        <h1 className="text-3xl mb-4">No results found</h1>
        <p className="text-lg">
          Try searching for something else or go back to the homepage{" "}
          <Link href="/" className="text-blue-500">
            Home
          </Link>
        </p>
      </div>
    );
  }
  return <>{results && <WebSearchResults results={results} aiResponse={aiResponse} />}</>;
}