import * as React from "react";

import { Banner } from "@/components/homepage/Banner";
import { ProductRecommendationCarousel } from "@/components/showcase/ProductRecommendationCarousel";
import { CategoryTabs } from "@/components/showcase/CategoryTabs";
import Header from "@/components/header/Header";
import Nav from "@/components/header/Nav";
import Footer from "@/components/footer/Footer";
import { searchProducts } from "@/lib/product-actions";

export default async function Home() {
  const response = await searchProducts({
    page: 1,
    pageSize: 10,
    requestType: "display",
    sortOrder: "ASC"
  });

  const recommendedProducts = response.success ? response.data.documents : [];

  return (
    <>
      <Header />
      <Nav />
      <div className="container mx-auto max-w-screen-xl">
        <Banner />
        <ProductRecommendationCarousel initialProducts={recommendedProducts} />
        <ProductRecommendationCarousel initialProducts={recommendedProducts} />
        <CategoryTabs />

        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-2"></div>
      </div>
      <Footer />
    </>
  );
}