import { addCurrency } from "@/locales";
import { Currency } from "../PaymentTable";
import styles from "./styles.module.css";

export interface IEmailItemProps {
  email: string;
  price: number;
  currency?: Currency;
  className?: string;
}

const roundToWhole = (value: string | number): number => {
  value = Number(value);
  if (value % Math.floor(value) !== 0) {
    return value;
  }
  return Math.floor(value);
};

const formatEmail = (email: string): string => {
  return `${email.slice(0, 4)}****`;
};

function EmailItem({
  email,
  price,
  currency = Currency.USD,
  className = "",
}: IEmailItemProps): JSX.Element {
  return (
    <span className={`${styles.container} ${className}`}>
      {formatEmail(email)}{" "}
      <strong>
        {" "}
        chose {addCurrency(roundToWhole(price / 100), currency)}{" "}
      </strong>
    </span>
  );
}

export default EmailItem;
