import React from "react";
import { FaMoneyBill } from "react-icons/fa";
import Image from "../../Ui/Image";
import { useNavigate, useParams } from "react-router-dom";
import { useGetOverView } from "../../../api/payment";
import { useTranslation } from "react-i18next";
import { Currency } from "../../../config/AppKey";
import { formatNumber } from "../../../utils/formatNumber";

const MoneyState = () => {
  const navigation = useNavigate();
  const { student_id } = useParams();
  const handelnavigate = () => {
    navigation(`payment`);
  };
  const { data } = useGetOverView({
    student_id: student_id,
  });
  const [t] = useTranslation();
  const to_be_paid = Number(data?.data?.to_be_paid) || 0;
  const paid = Number(data?.data?.paid) || 0;

  const dues = formatNumber(to_be_paid - paid);
  return (
    <div className="MoneyState">
      <header>{t("header.The_student_financial_situation")}</header>
      <main>
        <button>
          {t("select.Payments.dues")} : {dues} {Currency}
        </button>
        <div>
          <div>
            <FaMoneyBill />
          </div>
          <span>
            <h6>{t("select.Payments.to_be_paid")}</h6>
            <p>
              {formatNumber(to_be_paid)} {Currency}
            </p>
          </span>
        </div>
        <article>
          <span onClick={handelnavigate}>
            <Image src="/Icon/cash.png" />
            <h5>{t("models.payment")}</h5>
            <button>{t("practical.details")}</button>
          </span>
        </article>
      </main>
    </div>
  );
};

export default MoneyState;
