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

export default ConsultationTable;
