import { useTranslations } from "@/hooks/translations";
import styles from "./styles.module.scss";
import { ELocalesPlacement } from "@/locales";

interface IRefillProductProps {
  isActive: boolean;
  isOneTimeOffer: boolean;
  credits: number | string;
  price: number;
  oldPrice?: number;
  onClick: () => void;
}

function RefillProduct({
  isActive,
  isOneTimeOffer,
  credits,
  price,
  oldPrice,
  onClick,
}: IRefillProductProps) {
  const { translate } = useTranslations(ELocalesPlacement.Chats);
  return (
    <div
      className={`${styles.container} ${isActive && styles.active} ${
        isOneTimeOffer && styles["one-time"]
      }`}
      onClick={onClick}
    >
      {isOneTimeOffer && (
        <div className={styles.label}>
          {translate("/expert.refill_products_modal_one_time_offer")}
        </div>
      )}
      <div className={styles.content}>
        <div className={styles["credits-info"]}>
          <span className={styles.credits}>
            {translate("/expert.credits", {
              count: credits,
            })}
          </span>
          {isOneTimeOffer && (
            <span className={styles["extra-credits"]}>
              {translate("/expert.refill_products_modal_extra_credits", {
                credits: <b>+100</b>,
              })}
            </span>
          )}
        </div>
        <div className={styles.pricing}>
          <span className={styles["current-price"]}>€{price}</span>
          {isOneTimeOffer && (
            <span className={styles["old-price"]}>€{oldPrice}</span>
          )}
        </div>
      </div>
    </div>
  );
}

export default RefillProduct;
