import Title from "@/components/Title";
import styles from "./styles.module.css";
import Icon from "./icon.svg";
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.V1);
  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-consultation.your_unique_consultation")}
      </Title>
      <div className={styles.line} />
      <div className={styles["center-container"]}>
        <div className={styles.header}>
          <img src={Icon} alt="Icon" />
          <p>
            <span>{translate("/add-consultation.30-minute")}</span>
          </p>
        </div>
        <p className={styles.text}>
          {translate("/add-consultation.description")}
        </p>
      </div>
      <div className={styles.line} />
      <div className={styles.footer}>
        <span className={styles["one-time-price"]}>
          {translate("/add-consultation.one_time_price_offer")}
        </span>
        <span className={styles["current-price"]}>{_price}</span>
        <br />
        <span className={styles["old-price-container"]}>
          {translate("/add-consultation.original_price", {
            oldPrice: (
              <span className={styles["old-price"]}>
                {addCurrency(99.99, currency)}
              </span>
            ),
            discount: (
              <span className={styles.save}>
                {translate("/add-consultation.discount_save")} 50%
              </span>
            ),
          })}
        </span>
      </div>
    </div>
  );
}

export default ConsultationTable;
