import { FC } from "react";
import getData from "@/utils/fetch";
import { useQuery } from "@tanstack/react-query";
import { twMerge } from "tailwind-merge";
import { MdNetworkWifi, MdNetworkWifi2Bar } from "react-icons/md";
import Spinner from "../spinner";
type Props = {
  networkId: string;
};

const NetworkConnectionStatus: FC<Props> = ({ networkId }) => {
  const getNetworkStatus = async () => {
    const {
      data,
    } = await getData(`/api/v1/network-status/${networkId}`);
    return data;
  };
  const {
    data: networks,
    isLoading
  } = useQuery({
    queryKey: ["network-status"],
    queryFn: () => getNetworkStatus(),
    retry: 0,
  });
  return (
    <>
      <div className={twMerge("flex capitalize text-md font-semibold items-center", networks?.message === "connected" ? "text-green-600" : "text-red-600")}>
        {isLoading && <Spinner size="sm" />}
        {!isLoading && (
          <>
            {networks && networks?.message === 'connected' ? (
              <div className="flex gap-1">
                <div className="mt-0.5">
                  <MdNetworkWifi />
                </div>
                <div>
                  Connected
                </div>
              </div>
            ) : (
              <div className="flex gap-1">
                <div className="mt-0.5">
                  <MdNetworkWifi2Bar />
                </div>
                <div>
                  Disconnected
                </div>
              </div>
            )}
          </>
        )}
      </div>
    </>
  );
};

export default NetworkConnectionStatus;