import getCategories from "@/actions/get-category";
import getProducts from "@/actions/get-products";
import getVarieties from "@/actions/get-varieties";

import Menu from "@/components/menu";
import { Suspense } from "react";
import Loading from "./loading";

export const revalidate = 0;

const HomePage = async () => {
  const categories = await getCategories();
  const products = await getProducts({
    isFeatured: true,
  });
  const varieties = await getVarieties();

  const filteredVarieties = varieties.filter(
    (item) => item.categoryName === "Coffees"
  );

  const sortedProducts = products.sort((b, a) => {
    const dateA = new Date(a.createdAt);
    const dateB = new Date(b.createdAt);
    return dateB.getTime() - dateA.getTime();
  });

  return (
    <div className="w-full 2xl:px-4 md:px-12 xl:px-[0.25rem] px-0 overflow-hidden min-h-screen">
      <Suspense fallback={<Loading />}>
        <Menu
          items={sortedProducts}
          category={categories}
          varieties={filteredVarieties}
        />
      </Suspense>
    </div>
  );
};

export default HomePage;

"use client";
import React, { useState, useEffect } from "react";
import Styles from "@/app/Styles/loading.module.css";

const Loading = () => {
  return (
    <div className="min-h-screen w-full flex justify-center items-center">
      <div className={`${Styles.loading_box}`}>
        <p className={`${Styles.loading_title}`}>Loading</p>
        <div className={`${Styles.loading_circle}`}>
          <p className={`${Styles.loading_count}`}>
            <span id="loadingNumber">0</span>%
          </p>
        </div>
      </div>
    </div>
  );
};

export default Loading;