import React from "react";
import classNames from "classnames";

import { Card, CardBody } from "components/cards";
import { GlobalInfoStore } from "stores";

const StatsCard = () => {
  const { connectionState, onlineUsers } = GlobalInfoStore.useState();

  const connectionIndicator = (
    <div
      className={classNames("inline-block rounded-full w-4 h-4 mr-2", {
        "bg-green-400": connectionState === "connected",
        "bg-red-600": connectionState === "offline",
        "bg-yellow-200": connectionState === "connecting",
      })}
    />
  );

  return (
    <Card>
      <CardBody className="leading-normal">
        <div className="flex justify-between">
          <span>Stav vašeho připojení</span>
          <div className="flex items-center">
            {connectionIndicator}
            <strong>
              {connectionState === "connected" && "on-line"}
              {connectionState === "offline" && "off-line"}
              {connectionState === "connecting" && "připojování"}
            </strong>
          </div>
        </div>
        <div className="flex justify-between">
          <span>Počet on-line účastníků</span>
          <strong>{onlineUsers}</strong>
        </div>
      </CardBody>
    </Card>
  );
};

export default StatsCard;