import { useTranslations } from "@/hooks/translations";
import Price, { Currency, Locale } from "./Price";
import styles from "./styles.module.css";
import Countdown from "../Countdown";

type PaymentItem = {
  title: string;
  price: number;
  description: string;
};

type PaymentTableProps = {
  currency: Currency;
  locale: Locale;
  items: PaymentItem[];
};

function PaymentTable({
  currency,
  locale,
  items,
}: PaymentTableProps): JSX.Element {
  const { translate } = useTranslations();
  const total = items.reduce((acc, item) => acc + item.price, 0);
  const totalPrice = new Price(total, currency, locale);
  const toItem = (item: (typeof items)[0], idx: number) => {
    const price = new Price(item.price, currency, locale);
    return (
      <div key={idx} className={styles["payment__item"]}>
        <div className={styles["payment__item-summary"]}>
          <div className={styles["payment__item-title"]}>{item.title}</div>
          <div className={styles["payment__item-price"]}>{price.format()}</div>
        </div>
        <div className={styles["payment__item-description"]}>
          <p>{item.description}</p>
          {/* <p>One dollar thirty six cents per day</p> */}
        </div>
      </div>
    );
  };
  return (
    <div className={styles.payment}>
      <Countdown className={styles["payment__countdown"]} timeClassName={styles["payment__countdown-time"]} start={10} />
      <div className={styles["payment__table"]}>
        <div className={styles["payment__total"]}>
          <div className={styles["payment__total-title"]}>
            {translate("total_today")}
          </div>
          <div className={styles["payment__total-price"]}>
            {totalPrice.format()}
          </div>
        </div>
        <div className={styles["payment__items"]}>{items.map(toItem)}</div>
      </div>
      <div className={styles["payment__information"]}>
        {translate("charged_only", { price: totalPrice.format() })}
      </div>
    </div>
  );
}

export default PaymentTable;
export { Price, Currency, Locale };