import { Currency, Locale, Price } from "../PaymentTable";
import styles from "./styles.module.css";

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

const currency = Currency.USD;
const locale = Locale.EN;

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,
  className = "",
}: IEmailItemProps): JSX.Element {
  const _price = new Price(roundToWhole(price), currency, locale);

  return (
    <span className={`${styles.container} ${className}`}>
      {formatEmail(email)} <strong> chose {_price.format()} </strong>
    </span>
  );
}

export default EmailItem;