import { Suspense } from "react";

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

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

export default function Home() {
  const chatsPromise = loadChatsList();
  return (
    <section className={styles.page}>
      <Suspense fallback={<NewMessagesSectionSkeleton />}>
        <NewMessagesSection chatsPromise={chatsPromise} />
      </Suspense>

      <Horoscope />

      <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>
  );
}