import { Suspense } from "react";

import {
  AdvisersSection,
  AdvisersSectionSkeleton,
  CompatibilitySection,
  CompatibilitySectionSkeleton,
  HoroscopeSection,
  PalmSection,
  PalmSectionSkeleton,
  PortraitsSection,
  VideoGuidesSection,
} from "@/components/domains/dashboard";
import { loadChatsList } from "@/entities/chats/loaders";
import {
  loadAssistants,
  loadCompatibility,
  loadPalms,
  loadPortraits,
  loadVideoGuides,
} from "@/entities/dashboard/loaders";

import styles from "./page.module.scss";

// Force dynamic to always get fresh data
export const dynamic = "force-dynamic";

export default async function Home() {
  const chatsPromise = loadChatsList();
  const portraits = await loadPortraits();
  const videoGuides = await loadVideoGuides();

  return (
    <section className={styles.page}>
      <PortraitsSection portraits={portraits} />

      <VideoGuidesSection videoGuides={videoGuides} />

      <HoroscopeSection />

      <Suspense fallback={<AdvisersSectionSkeleton />}>
        <AdvisersSection
          promiseAssistants={loadAssistants()}
          promiseChats={chatsPromise}
        />
      </Suspense>

      <Suspense fallback={<CompatibilitySectionSkeleton />}>
        <CompatibilitySection promise={loadCompatibility()} />
      </Suspense>


      <Suspense fallback={<PalmSectionSkeleton />}>
        <PalmSection promise={loadPalms()} />
      </Suspense>
    </section>
  );
}