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;
  className?: string;
  classNameActive?: string;
  click: (id: string) => void;
}

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

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

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

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

export default PriceItem;
