import { type FC, useState } from "react";
import { EmptyWallet } from "iconsax-react";
import { useTranslation } from "react-i18next";
import { formatPrice } from "@/helpers/func";
import { useGetWalletBalance } from "../hooks/useWalletData";
import ChargeModal from "./ChargeModal";
import MoonLoader from "react-spinners/MoonLoader";

const WalletHeader: FC = () => {
  const { t } = useTranslation("global");
  const [showChargeModal, setShowChargeModal] = useState(false);
  const { data, isLoading } = useGetWalletBalance();

  const balance = data?.data?.balance ?? 0;

  return (
    <>
      <div className="flex items-center gap-2 bg-[#F5F5F5] rounded-xl px-3 h-9">
        <EmptyWallet size={18} color="black" />
        <div className="text-xs whitespace-nowrap min-w-[80px]">
          {isLoading ? (
            <MoonLoader size={12} color="#000" />
          ) : (
            formatPrice(balance)
          )}
        </div>
        <button
          type="button"
          onClick={() => setShowChargeModal(true)}
          className="text-xs bg-primary text-white rounded-lg px-3 h-7 whitespace-nowrap hover:opacity-90 transition-opacity"
        >
          {t("wallet.charge")}
        </button>
      </div>

      <ChargeModal
        open={showChargeModal}
        onClose={() => setShowChargeModal(false)}
      />
    </>
  );
};

export default WalletHeader;