import Title from "@/components/Title";
import styles from "./styles.module.scss";
import { useTranslations } from "@/hooks/translations";
import { addCurrency, ELocalesPlacement } from "@/locales";
import { useSelector } from "react-redux";
import { selectors } from "@/store";
import { useMemo } from "react";

interface IConsultationTableProps {
  price: number;
}

function ConsultationTable({ price }: IConsultationTableProps) {
  const { translate } = useTranslations(ELocalesPlacement.PalmistryV1);
  const currency = useSelector(selectors.selectCurrency);
  const _price = useMemo(() => {
    return addCurrency((price / 100).toFixed(2), currency);
  }, [currency, price]);

  return (
    <div className={styles.container}>
      <Title variant="h2" className={styles.title}>
        {translate("/add-consultant.your_unique_consultation")}
      </Title>
      <div className={styles["header"]}>
        <div className={styles["text-container"]}>
          <Title variant="h3" className={styles.title}>
            {translate("/add-consultant.30-minute")}
          </Title>
          <p className={styles.text}>
            {translate("/add-consultant.unlock_profound")}
          </p>
        </div>
        <img src="/paywall__spiritist-spiritualist.png" alt="spiritualist" />
      </div>
      <div className={styles.line} />
      <div className={styles.footer}>
        <span className={styles["one-time-price"]}>
          {translate("/add-consultant.one_time_price_offer")}
        </span>
        <span className={styles["current-price"]}>{_price}</span>
        <br />
        <div className={styles["old-price-container"]}>
          {translate("/add-consultant.original_price", {
            oldPrice: addCurrency(99.99, currency),
            discount: <span className={styles.save}>Economisez 50</span>,
          })}
        </div>
        <div className={styles.line} />
        <div className={styles["choose-container"]}>
          <p>{translate("/add-consultant.choose_from")}</p>

          <img src="/paywall__astrologers-image.png" alt="astrologers" />
        </div>
      </div>
    </div>
  );
}

export default ConsultationTable;
