import { Kbd, List } from "flowbite-react";
import { FC } from "react";
import { twMerge } from "tailwind-merge";
import { TSnetworkSchema } from "../forms/schema/network";
type Props = {
  network: TSnetworkSchema;
};

const NetworkStatus: FC<Props> = ({ network }) => {
  const graph_status = !!network.graph_status;
  const mikrotik_status = !!network.auto_client_mikrotik_status;
  const sync_status = !!network.auto_sync_status;
  return (
    <>
      <div className="flex items-center">
        <div className={twMerge("mr-2 h-2.5 w-2.5 rounded-full")} />
        <List>
          <List.Item className="!mb-2 block">
            Mikrotik Status:
            <Kbd
              className={`${
                mikrotik_status ? "bg-green-500" : "bg-red-500"
              } ml-2 text-gray-200`}
            >
              {mikrotik_status ? "ON" : "OFF"}
            </Kbd>
          </List.Item>
          <List.Item className="!mb-2 block">
            Graph Status:
            <Kbd
              className={`${
                graph_status ? "bg-green-500" : "bg-red-500"
              } ml-2 text-gray-200`}
            >
              {graph_status ? "ON" : "OFF"}
            </Kbd>
          </List.Item>
          <List.Item className="!mb-2 block">
            Sync Status:
            <Kbd
              className={`${
                sync_status ? "bg-green-500" : "bg-red-500"
              } ml-2 text-gray-200`}
            >
              {sync_status ? "ON" : "OFF"}
            </Kbd>
          </List.Item>
        </List>
      </div>
    </>
  );
};

export default NetworkStatus;