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

import {
  AdditionalPurchaseBanner,
  ProductSelectionProvider,
  VideoGuidesButton,
  VideoGuidesOffers,
  VideoGuidesOffersSkeleton,
} from "@/components/domains/additional-purchases";
import { Typography } from "@/components/ui";

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

export default async function VideoGuidesPage() {
  const t = await getTranslations("AdditionalPurchases.video-guides");

  return (
    <ProductSelectionProvider>
      <AdditionalPurchaseBanner />
      <Typography as="h1" className={styles.title}>
        {t("title")}
      </Typography>
      <Typography as="h2" className={styles.subtitle}>
        {t("subtitle")}
      </Typography>
      <Suspense fallback={<VideoGuidesOffersSkeleton />}>
        <VideoGuidesOffers />
      </Suspense>
      <Typography as="p" align="left" className={styles.description}>
        {t("description")}
      </Typography>
      <VideoGuidesButton />
    </ProductSelectionProvider>
  );
}
