"use client";
import { FC, useState } from "react";
import getData from "@/utils/fetch";
import { toast } from "react-toastify";
import { useQuery } from "@tanstack/react-query";
import PaymentConfirm from "@/components/client-payment/payment-confirm";
import { TSclientPaymentSchema } from "@/components/forms/schema/client-payment";
import Spinner from "@/components/spinner";
import BkashPayment from "@/components/bkash/bkash-payment";

type props = {
  clientId?: string;
};

const PaymentContent: FC<props> = () => {
  const getClientProfile = async () => {
    const data = await getData(`/api/v1/client-profile`);
    if (!data?.success) {
      return toast.error(data);
    }
    return data?.data;
  };
  const { data: client, isLoading } = useQuery<TSclientPaymentSchema>({
    queryKey: ["client-info"],
    queryFn: () => getClientProfile(),
    retry: 0,
  });
  return (
    <>
      {isLoading ? (<Spinner />) : (
        <div className="overflow-hidden pt-5">
          <PaymentConfirm client={client} />
          <div className="flex justify-center">
            <BkashPayment client={client} redirect="client/pay" />
          </div>
        </div>
      )}
    </>
  );
};

export default PaymentContent;