import Link from "next/link";
import Parser from "html-react-parser";
import PaginationButtons from "./PaginationButtons";
import { MemoizedReactMarkdown } from './MemoizedReactMarkdown';

export default function WebSearchResults({ aiResponse, results }) {
  return (
    <div className="w-full mx-auto px-3 pb-40 sm:pb-24 sm:pl-[5%] md:pl-[14%] lg:pl-52">
      <div className="w-1/4">
        <div className="flex flex-row">
          <MemoizedReactMarkdown
            className="prose dark:prose-invert flex-1"
            components={{
              code({ node, inline, className, children, ...props }) {
                if (children.length) {
                  if (children[0] == '▍') {
                    return <span className="animate-pulse cursor-default mt-1">▍</span>
                  }
                  children[0] = (children[0]).replace("`▍`", "▍")
                }
                const match = /language-(\w+)/.exec(className || '');
                return !inline ? (
                  <CodeBlock
                    key={Math.random()}
                    language={(match && match[1]) || ''}
                    value={String(children).replace(/\n$/, '')}
                    {...props}
                  />
                ) : (
                  <code className={className} {...props}>
                    {children}
                  </code>
                );
              },
              table({ children }) {
                return (
                  <table className="border-collapse border border-black px-3 py-1 dark:border-white">
                    {children}
                  </table>
                );
              },
              th({ children }) {
                return (
                  <th className="break-words border border-black bg-gray-500 px-3 py-1 text-white dark:border-white">
                    {children}
                  </th>
                );
              },
              td({ children }) {
                return (
                  <td className="break-words border border-black px-3 py-1 dark:border-white">
                    {children}
                  </td>
                );
              },
            }}
          >
            {`${aiResponse}`}
          </MemoizedReactMarkdown>
        </div>
      </div>
      <div className="flex-grow">
        <p className="text-gray-600 text-sm mb-5 mt-3">
          About {results.searchInformation?.formattedTotalResults} results (
          {results.searchInformation?.formattedSearchTime} seconds)
        </p>
        {results.items?.map((result) => (
          <div className="mb-8 max-w-xl" key={result.link}>
            <div className="group flex flex-col">
              <Link rel="noopener noreferrer" target="_blank" className="text-sm truncate" href={result.link}>
                {result.formattedUrl}
              </Link>
              <Link
                rel="noopener noreferrer" target="_blank"
                className="group-hover:underline decoration-blue-800 text-xl truncate font-medium text-blue-800"
                href={result.link}
              >
                {result.title}
              </Link>
            </div>
            <p className="text-gray-600">{Parser(result.htmlSnippet)}</p>
          </div>
        ))}
        <PaginationButtons />
      </div>
    </div>
  );
}