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

import { Typography } from "@/components/ui";
import { IFunnelPaymentVariant } from "@/entities/session/funnel/types";
import { translatePathEmailMarketingSoulmateV1 } from "@/shared/constants/translate";
import { Currency } from "@/types";
import { PeriodType } from "@/types/period";

import Prices from "../Prices/Prices";
import TrialIntervalOffer from "../TrialIntervalOffer/TrialIntervalOffer";

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

interface ISpecialOfferProps {
  variant: IFunnelPaymentVariant;
  currency: Currency;
  oldTrialInterval: number;
  newTrialInterval: number;
  trialPeriod: PeriodType;
}

export default async function SpecialOffer({
  variant,
  currency,
  oldTrialInterval,
  newTrialInterval,
  trialPeriod,
}: ISpecialOfferProps) {
  const t = await getTranslations(
    translatePathEmailMarketingSoulmateV1("Landing.special-offer")
  );

  return (
    <div className={styles.container}>
      <Typography as="h2" align="left" className={styles.title}>
        {t("title")}
      </Typography>
      <Prices
        oldPrice={variant.price}
        newPrice={variant?.trialPrice || 0}
        currency={currency}
      />
      <TrialIntervalOffer
        oldTrialInterval={oldTrialInterval}
        newTrialInterval={newTrialInterval}
        periodType={trialPeriod}
      />
    </div>
  );
}
