"use client";
import getData from "@/utils/fetch";
import { useNumberFormat } from "@/utils/lib/helpers";
import { useQuery } from "@tanstack/react-query";
import React from "react";
import { toast } from "react-toastify";
import Spinner from "../spinner";
import CardSkeleton from "./card-skeleton-loader";

type ResellerCount = {
  total_clients: number;
  active_clients: number;
  inactive_clients: number;
};

const ResellerCards: React.FC = () => {
  const getResellerCount = async () => {
    const data = await getData(`/api/v1/dashboard-reseller-count`);
    if (!data?.success) {
      return toast.error(data);
    }
    return data?.data;
  };
  const { data: clients, isLoading } = useQuery<ResellerCount>({
    queryKey: ["reseller-count"],
    queryFn: () => getResellerCount(),
    retry: 0,
  });
  const CountCard = ({
    title,
    count,
    color = "text-green-600",
  }: {
    title: string;
    count: number;
    color?: string;
  }) => (
    <>
      {isLoading ? <CardSkeleton /> : (
        <div>
          <div className={`flex font-medium text-gray-900`}>
            <div>
              {title}
            </div>
            <div className="mb-4">({useNumberFormat(count)})</div>
          </div>
          <div className="mt-12">
            <div className="flex justify-between">
              <div className="text-green-600 font-medium">
                Active: {useNumberFormat(clients?.active_clients)}
              </div>
              <div className="text-red-500 font-medium">
                Inactive : {useNumberFormat(clients?.inactive_clients)}
              </div>
            </div>
          </div>
        </div>
      )}
    </>

  );
  return (
    <>
      <div className="bg-white p-3 shadow rounded">
        {
          <CountCard
            title="Total reseller"
            count={clients?.total_clients}
          />
        }
      </div>
    </>
  );
};

export default ResellerCards;