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

import { Offer } from "@/components/domains/retaining";
import {
  Buttons,
  LottieAnimations,
} from "@/components/domains/retaining/cancellation-of-subscription";
import { TopSellingSvg } from "@/components/domains/retaining/images";
import { Typography } from "@/components/ui";

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

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

  return (
    <div className={styles.container}>
      <LottieAnimations />
      <Typography as="h1" weight="bold" className={styles.title}>
        {t("title")}
      </Typography>
      <Typography as="p" align="left" className={styles.description}>
        {t("description")}
      </Typography>
      <Offer
        className={styles.offer}
        classNameTitle={styles.titleOffer}
        title={t("offer.title")}
        oldPrice={t("offer.old-price")}
        newPrice={t("offer.new-price")}
        image={<TopSellingSvg className={styles.topSellingImage} />}
        active={true}
      />
      <Buttons />
    </div>
  );
}
