text: import dbConnect from "../../mongo/dbConnect";
  import Products from "../../mongo/Products";
  import App from "../../components/App";
  import Layout from "../../components/Layout";
  import Logo from "../../components//Logo";
  import Error from "../../components//Error";
  import ProductHeader from "../../components/ProductHeader";
  
  const VS = (props) => {
    const fullname1 =
      props.vsProducts[0].brand + " " + props.vsProducts[0].productName;
    const fullname2 =
      props.vsProducts[1].brand + " " + props.vsProducts[1].productName;
    const metaTitle =
      fullname1 +
      " vs " +
      fullname2 +
      ` | Analysis of expert and consumer reviews | ${props.siteName} powered by reviewr.ai`;
    const metaDescription =
      "Find out if the " +
      fullname1 +
      " or the " +
      fullname2 +
      " is best suited for your needs. We've analyzed reviews from experts and consumers alike to give you the best comparison.";
    const metaImage = props.vsProducts[0].image;
    return (
      <Layout
        metaTitle={metaTitle}
        metaDescription={metaDescription}
        metaImage={metaImage}
      >
        <ProductHeader />
        <App product={props.vsProducts[0]} vsProducts={props.vsProducts} />
      </Layout>
    );
  };
  
  export default function Page(props) {
    if (!props.vsProducts) {
      return (
        <div className="flex flex-col h-screen justify-center items-center animate-pulse bg-gray-100 text-gray-500 font-semibold">
          <div className="mb-8">
            <Logo />
          </div>
          Loading...
        </div>
      );
    } else {
      if (props.vsProducts !== "error") {
        return <>{VS(props)}</>;
      } else {
        return <Error />;
      }
    }
  }
  
  export async function getStaticPaths() {
    const paths = [];
    return {
      paths,
      fallback: true,
    };
  }
  
  export async function getStaticProps({ params }) {
    const siteName = process.env.SITENAME;
    await dbConnect();
    if (params.id.includes("-vs-")) {
      const product1 = await Products.find({
        slug: params.id.split("-vs-")[0],
      }).lean();
      const product2 = await Products.find({
        slug: params.id.split("-vs-")[1],
      }).lean();
      const vsProducts =
        product1.length > 0 && product2.length > 0
          ? [
              JSON.parse(JSON.stringify(product1))[0],
              JSON.parse(JSON.stringify(product2))[0],
            ]
          : null;
      if (vsProducts) {
        return {
          props: { siteName, vsProducts },
        };
      } else {
        return {
          props: { vsProducts: "error" },
        };
      }
    } else {
      return {
        props: { vsProducts: "error" },
      };
    }
  }
  