"use client";

import Image from "next/image";
import { useTranslations } from "next-intl";

import { Typography } from "@/components/ui";
import { getFormattedPrice } from "@/shared/utils/price";
import { Currency } from "@/types";

import { useMultiPageNavigationContext } from "..";

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

export default function ConsultationTable() {
  const t = useTranslations("AdditionalPurchases.add-consultant");
  const { navigation } = useMultiPageNavigationContext();
  const data = navigation.currentItem;

  const currency = Currency.USD;

  const product = data?.variants?.[0];
  const discount =
    data?.properties?.find(p => p.key === "discount")?.value ?? 0;

  const price = getFormattedPrice(product?.price ?? 0, currency);
  const oldPrice = getFormattedPrice(
    Number(product?.price ?? 0) * 100 / (100 - Number(discount)),
    currency,
  );

  return (
    <div className={styles.container}>
      <Typography as="h2" weight="bold" className={styles.title}>
        {t("your_unique_consultation")}
      </Typography>
      <div className={styles.header}>
        <div className={styles.textContainer}>
          <Typography
            as="h3"
            align="left"
            weight="semiBold"
            className={styles.title}
          >
            {t("30-minute")}
          </Typography>
          <Typography as="p" align="left" className={styles.text}>
            {t("unlock_profound")}
          </Typography>
        </div>
        <Image
          src="/paywall__spiritist-spiritualist_new.png"
          alt="spiritualist"
          width={76.3}
          height={100}
        />
      </div>
      <div className={styles.line} />
      <div className={styles.footer}>
        <Typography
          as="p"
          color="black"
          weight="bold"
          align="left"
          className={styles.oneTimePrice}
        >
          {t.rich("one_time_price_offer", {
            price: () => (
              <Typography as="span" weight="bold" size="xl" color="black">
                {price}
              </Typography>
            ),
          })}
        </Typography>
        <Typography
          as="p"
          color="black"
          size="sm"
          align="left"
          className={styles.oldPrice}
        >
          {t("original_price", {
            oldPrice: oldPrice,
          })}
          <Typography weight="bold" className={styles.save}>
            {t("save", {
              discount: discount,
            })}
          </Typography>
        </Typography>
        <div className={styles.line} />
        <div className={styles.chooseContainer}>
          <Typography as="p" align="left" className={styles.chooseText}>
            {t("choose_from")}
          </Typography>

          <Image
            src="/paywall__astrologers-image_new.png"
            alt="astrologers"
            width={106}
            height={40}
          />
        </div>
      </div>
    </div>
  );
}