"use client";
import ActionButton from "@/components/action-button";
import MoneyFormat from "@/components/common/money";
import { TSclientSchema } from "@/components/forms/schema/client";
import Spinner from "@/components/spinner";
import getData from "@/utils/fetch";
import { useQuery } from "@tanstack/react-query";
import { useRouter } from "next/navigation";
import React from "react";
import { toast } from "react-toastify";


const ClientInfo: React.FC = () => {
  const getClientCount = async () => {
    const data = await getData(`/api/v1/client-profile`);
    if (!data?.success) {
      return toast.error(data);
    }
    return data?.data;
  };
  const { data: client, isLoading } = useQuery<TSclientSchema>({
    queryKey: ["client-count"],
    queryFn: () => getClientCount(),
    retry: 0,
  });
  const clientDue = (client: any) => {
    return client?.invoice?.reduce((acc, items) => acc + items?.after_discount_amount, 0);
  }
  const route = useRouter();
  return (
    <>
      {isLoading ? (
        <Spinner size="xs" />
      ) : (
        <div className="bg-white p-4 shadow w-[300px]">
          <div className="">
            <div className="flex font-medium text-md gap-4">
              <div>
                Package:
              </div>
              <div>
                {client?.package?.name}
              </div>
            </div>
            <div className="flex font-medium text-md gap-4">
              <div>
                Total Due:
              </div>
              <MoneyFormat icon={false} moneyClass="text-red-600" amount={clientDue(client)} />
            </div>
          </div>
          <ActionButton onClick={() => route.push("/client/pay")} size="sm" className="mt-2" type="any">
            Pay now
          </ActionButton>
        </div>
      )}

    </>
  );
};

export default ClientInfo;