import { Suspense } from "react";
import { useTranslations } from "next-intl";

import {
  AddGuidesButton,
  Caution,
  Offers,
  OffersSkeleton,
  ProductSelectionProvider,
} from "@/components/domains/additional-purchases";
import { Typography } from "@/components/ui";
import { loadFunnelProducts } from "@/entities/session/funnel/loaders";
import { ELocalesPlacement } from "@/types";

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

const payload = {
  funnel: ELocalesPlacement.CompatibilityV2,
};

export default function AddGuides() {
  const t = useTranslations("AdditionalPurchases.add-guides");

  return (
    <ProductSelectionProvider>
      <Caution />
      <Typography as="h2" size="xl" weight="semiBold" className={styles.title}>
        {t("title")}
      </Typography>
      <Typography as="h3" size="sm" className={styles.subtitle}>
        {t("subtitle")}
      </Typography>
      <Suspense fallback={<OffersSkeleton />}>
        <Offers products={loadFunnelProducts(payload, "add_guides")} />
      </Suspense>
      <Typography align="left" color="secondary" className={styles.description}>
        {t("description")}
      </Typography>
      <AddGuidesButton />
    </ProductSelectionProvider>
  );
}