import { Badge, Card } from "antd";
import { MessageFilled } from "@ant-design/icons";
import React from "react";
import { useTranslation } from "react-i18next";
export default function ChatWindowComponent({
  chatVisible,
  toggleChatVisible
}) {
  const { t } = useTranslation();
  return (
    <div>
      <Badge count={5}>
        <Card
          onClick={() => toggleChatVisible()}
          style={{
            width: chatVisible ? "300px" : "125px",
            margin: "0px 10px"
          }}
          size="small"
        >
          {chatVisible ? (
            <div className="messages" style={{ height: "400px" }}>
              List of chats here.
            </div>
          ) : (
            <div>
              <MessageFilled />
              <strong style={{ paddingLeft: "10px" }}>
                {t("messaging.labels.messaging")}
              </strong>
            </div>
          )}
        </Card>
      </Badge>
    </div>
  );
}
