"use client";

import { useTranslations } from "next-intl";

import { Typography } from "@/components/ui";
import { useDynamicSize } from "@/hooks/DOM/useDynamicSize";
import { usePeriod } from "@/hooks/translations/usePeriod";
import { getFormattedPrice } from "@/shared/utils/price";
import { Currency } from "@/types";
import { PeriodType } from "@/types/period";

import { Blob4 } from "..";

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

interface ISecretDiscountPolicy {
  trialPeriod: PeriodType;
  trialInterval: number;
  billingPeriod: PeriodType;
  billingInterval: number;
  price: number;
  currency: Currency;
}

export default function SecretDiscountPolicy({
  trialPeriod,
  trialInterval,
  billingPeriod,
  billingInterval,
  price,
  currency,
}: ISecretDiscountPolicy) {
  const t = useTranslations("SecretDiscount");
  const { getPeriodText } = usePeriod();
  const {
    height,
    width,
    elementRef: policyContainerRef,
  } = useDynamicSize<HTMLDivElement>({ defaultWidth: 560, defaultHeight: 193 });

  return (
    <>
      <div className={styles["policy-container"]} ref={policyContainerRef}>
        <Typography as="p" align="left" className={styles.policy}>
          {t("policy", {
            trialPeriod: getPeriodText(
              trialPeriod,
              trialInterval,
              "period_adjective"
            ),
            price: getFormattedPrice(price, currency, 0),
            billingPeriod: getPeriodText(billingPeriod, billingInterval),
          })}
        </Typography>
        <Blob4 className={styles.blob4} width={width} height={height + 68} />
      </div>
      <div style={{ marginTop: `${height + 76}px` }} />
    </>
  );
}
