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

import {
  AddConsultantButton,
  Caution,
  ConsultationTable,
  ConsultationTableSkeleton,
} from "@/components/domains/additional-purchases";
import { Card, Typography } from "@/components/ui";
import {
  loadFunnelProducts,
  loadFunnelProperties,
} from "@/entities/session/funnel/loaders";
import { ELocalesPlacement } from "@/types";

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

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

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

  return (
    <>
      <Caution />
      <Typography as="h2" size="xl" weight="semiBold" className={styles.title}>
        {t("title")}
      </Typography>
      <Typography
        as="p"
        size="sm"
        color="black"
        className={styles.exclusiveOffer}
      >
        {t("exclusive_offer")}
      </Typography>
      <Suspense fallback={<ConsultationTableSkeleton />}>
        <Card className={styles.consultationTable}>
          <ConsultationTable
            products={loadFunnelProducts(payload, "add_consultant")}
            properties={loadFunnelProperties(payload, "add_consultant")}
          />
        </Card>
      </Suspense>
      <AddConsultantButton
        products={loadFunnelProducts(payload, "add_consultant")}
      />
    </>
  );
}