import { Suspense } from "react";

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

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

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

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

      <HoroscopeSection />

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

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

      <Suspense fallback={<MeditationSectionSkeleton />}>
        <MeditationSection promise={loadMeditations()} />
      </Suspense>

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