import { useTranslations } from "next-intl";

import { Buttons } from "@/components/domains/retaining/cancel-subscription";
import { Typography } from "@/components/ui";

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

export default function CanselSubscription() {
  const t = useTranslations("CancelSubscription");

  return (
    <div className={styles.container}>
      <Typography as="h1" size="xl" weight="bold" className={styles.title}>
        {t("title")}
      </Typography>
      <Typography as="p" className={styles.description}>
        {t.rich("description", {
          br: () => <br />,
        })}
      </Typography>
      <Buttons />
    </div>
  );
}
