import { useQuery } from "@tanstack/react-query";
import axios from "axios";
import { Badge } from "flowbite-react";
import { FC, useId } from "react";
import { MdOutlineFileDownload, MdOutlineFileUpload } from "react-icons/md";
import ButtonSkeleton from "../skeleton/button-skeleton";
import getData from "@/utils/fetch";

type props = {
  clientId: string;
  setSpeed?: (x: any) => void
};

const ClientSpeed: FC<props> = ({ clientId, setSpeed = () => { } }) => {
  const randomId = useId();

  const getClientSpeed = async () => {
    const data: any = await getData(`/api/v1/clients-speed/${clientId}`);
    const speed = data?.data;
    setSpeed(speed)
    return speed;
  };

  let { data: speed, isLoading }: any = useQuery({
    queryKey: [randomId],
    queryFn: getClientSpeed,
    retry: 0,
    refetchInterval: 5000,
  });

  return (

    <div className="w-full relative dark:bg-gray-800">
      {!isLoading && (
        <div className="flex gap-2">
          <div>
            <Badge color={'gray'} size={'md'}>
              <div className="flex gap-1">
                <MdOutlineFileUpload className="mt-0.5" />{" "}
                <div>
                  {speed?.upload_speed}
                </div>
              </div>
            </Badge>
          </div>
          <div>
            <Badge color={'gray'} size={'md'}>
              <div className="flex gap-1">
                <div>
                  <MdOutlineFileDownload className="mt-0.5" />
                </div>
                <div>

                  {speed?.download_speed}
                </div>
              </div>
            </Badge>
          </div>
        </div>
      )}
    </div>
  )
};

export default ClientSpeed;