import { Suspense } from "react";

import {
  ChatCategories,
  ChatCategoriesSkeleton,
  ChatListHeader,
  CorrespondenceStartedSkeleton,
  CorrespondenceStartedWrapper,
  NewMessagesWrapper,
  NewMessagesWrapperSkeleton,
} from "@/components/domains/chat";
import { NavigationBar } from "@/components/layout";

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

export const dynamic = "force-dynamic";
export const revalidate = 0;
export const fetchCache = "force-no-store";

export default function Chats() {
  return (
    <div className={styles.container}>
      <ChatListHeader />
      <section className={styles.categories}>
        <Suspense fallback={<NewMessagesWrapperSkeleton />}>
          <NewMessagesWrapper />
        </Suspense>
        <Suspense fallback={<CorrespondenceStartedSkeleton />}>
          <CorrespondenceStartedWrapper />
        </Suspense>
        <Suspense fallback={<ChatCategoriesSkeleton />}>
          <ChatCategories />
        </Suspense>
      </section>
      <NavigationBar />
    </div>
  );
}
