import { Suspense } from "react";
import { getTranslations } from "next-intl/server";

import {
  CancelSubscriptionModalProvider,
  SubscriptionsList,
  SubscriptionsListSkeleton,
} from "@/components/domains/profile/subscriptions";
import { Typography } from "@/components/ui";
import { loadSubscriptionsData } from "@/entities/subscriptions/loaders";

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

export default async function Subscriptions() {
  const t = await getTranslations("Subscriptions");

  return (
    <CancelSubscriptionModalProvider>
      <div className={styles.container}>
        <Typography as="h1" className={styles.title}>
          {t("title")}
        </Typography>
        <Suspense fallback={<SubscriptionsListSkeleton />}>
          <SubscriptionsList promise={loadSubscriptionsData()} />
        </Suspense>
      </div>
    </CancelSubscriptionModalProvider>
  );
}
