import { removeAfterDot, roundToWhole } from "@/services/price";
import { Currency, Locale, Price } from "../PaymentTable";
import styles from "./styles.module.css";

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

interface PriceItemProps {
  id: string;
  value: number;
  active: boolean;
  click: (id: string) => void;
}

function PriceItem({ id, value, active, click }: PriceItemProps): JSX.Element {
  const _price = new Price(
    roundToWhole(value === 1 ? 0.99 : value),
    currency,
    locale
  );

  const compatClassName = () => {
    const isPopular = id === "stripe.7";
    const isActive = active;
    return `${styles.container} ${isPopular ? styles.popular : ""} ${
      isActive ? styles.active : ""
    }`;
  };

  const itemClick = () => {
    click(id);
  };

  return (
    <div onClick={itemClick} className={compatClassName()}>
      {removeAfterDot(_price.format())}
    </div>
  );
}

export default PriceItem;