"use client";
import getData from "@/utils/fetch";
import { useQuery } from "@tanstack/react-query";
import { useRouter, useSearchParams } from "next/navigation";
import { FC, useEffect } from "react";
import MoneyFormat from "../common/money";
import Spinner from "../spinner";

type Props = {
  label?: boolean;
};

const MyWallet: FC<Props> = ({ label = true }) => {
  const params = useSearchParams();
  const route = useRouter();
  const getWallet = async () => {
    const data = await getData("/api/v1/my-wallet");
    if (params?.get("payment") === "success") {
      route.push("/wallets");
    }
    return data?.data;
  };

  const {
    data: wallet,
    isLoading,
    refetch,
  } = useQuery({
    queryKey: ["my-wallet"],
    queryFn: getWallet,
    retry: 0,
  });

  useEffect(() => {
    if (params?.get("payment") === "success") {
      refetch();
    }
  }, [params]);

  return (
    <>
      {isLoading ? (
        <Spinner size="xs" />
      ) : (
        <>
          <div className="flex">
            <div className="flex">
              {label && <div>Balance:</div>}
              <div className="">
                <MoneyFormat amount={wallet?.balance} />{" "}
              </div>
            </div>
          </div>
        </>
      )}
    </>
  );
};

export default MyWallet;