// First, import what we need from React SDK
import { PageController, widget, useSearchResults, WidgetDataType } from "@sitecore-search/react";

// Import the component generated by the CLI.
import QueryResultsSummary from "@/components/QueryResultsSummary";

// SortOrder needs to be under the Search Results widget context
// To accomplish that, we need to create a widget using the
// widget function and to get page data we use useSearchResults hook.
const QueryResultsSummaryComponent = () => {
  const {
      state: { currentPage, itemsPerPage },
      queryResult: {
          isLoading,
          data: {
              total_item: totalItems = 0,
              content: articles = [],
          } = {},
      },
  } = useSearchResults({
      state: {
          currentPage: 1,
          itemsPerPage: 24,
      }
  });
  return (
      <>
          {!isLoading && <QueryResultsSummary totalItems={totalItems} currentPage={currentPage} itemsPerPage={itemsPerPage} articles={articles} />}
      </>
  )
}

// Convert the regular component to a compatible widget.
const QueryResultsSummaryWidget = widget(QueryResultsSummaryComponent, WidgetDataType.SEARCH_RESULTS, 'content');

// Then, we can use the widget
function MyApp() {
  return (
    <WidgetsProvider {...CONFIG}>
      <QueryResultsSummaryWidget rfkId="rfkid_7" />
    </WidgetsProvider>
  );
};