"use client";
import React from "react";
import CategoryGrid, {
  CategoryGridSkeleton,
} from "@/components/category/grid/category-grid";
import ArticleGrid, {
  ArticleGridSkeleton,
} from "@/components/article/grid/article-grid";
import { Article, Category } from "@/server/db/schema";
import ArrowLink from "@/components/arrow-link";
import { appRoutes } from "@/config";
import GlobalSearchWidget from "@/components/article/article-filter-bar";
import { api } from "@/trpc/react";
import { useInfiniteQuery } from "@tanstack/react-query";

const ITEMS_PER_PAGE = 10;

function MainPage({
  initialData,
}: {
  initialData: { categories: Array<Category>; articles: Array<Article> };
}) {
  // const [query, setQuery] = React.useState<string>("");

  // // const {} = useInfiniteQuery();

  // const { data: searchResults, isLoading } = api.app.searchContent.useQuery(
  //   {
  //     query,
  //   },
  //   {
  //     enabled: !!query,
  //   },
  // );

  // const data = query?.length ? searchResults : initialData;

  return (
    <>
      main page xD
      {/* <GlobalSearchWidget
        onDebouncedSearch={
          (q) => setQuery(q)
          // q.length ? setQuery(q) : setQuery(undefined)
        }
        className="sticky top-0"
      /> */}
      {/* <div className="w-full space-y-1">
        <div className="flex items-center justify-between">
          <h2 className="text-2xl font-medium">Kategorien</h2>
          <ArrowLink href={appRoutes.allCategories}>Alle Kategorien</ArrowLink>
        </div>
        {isLoading ? (
          <CategoriesGridSkeleton />
        ) : data?.categories?.length ? (
          <CategoriesGrid categories={data.categories} />
        ) : (
          <p>Keine Kategorien gefunden</p>
        )}
      </div>

      <div className="min-h-screen w-full space-y-1">
        <div className="flex items-center justify-between">
          <h2 className="text-2xl font-medium">Artikel</h2>
          <ArrowLink href={appRoutes.allArticles}>Alle Artikel</ArrowLink>
        </div>
        {isLoading ? (
          <ArticleGridSkeleton />
        ) : data?.articles?.length ? (
          <ArticleGrid articles={data.articles as Article[]} />
        ) : (
          <p>Keine Artikel gefunden</p>
        )}
      </div> */}
    </>
  );
}

export default MainPage;
