import React from "react";
import PropTypes from "prop-types";
import {
  CheckButton,
  Commands,
  PhoneIcon,
  PhoneIconContainer,
} from "./ChatCommands.styled";
import selectedTheme from "../../../../themes";
import { useTranslation } from "react-i18next";

const ChatCommands = (props) => {
  const { t } = useTranslation();

  return (
    <Commands>
      <PhoneIconContainer>
        <PhoneIcon />
      </PhoneIconContainer>
      <CheckButton
        buttoncolor={selectedTheme.primaryPurple}
        textcolor={selectedTheme.primaryPurple}
        variant={"outlined"}
        style={{ fontWeight: "600" }}
        onClick={props.routeToItem}
      >
        {t("messages.seeChats")}
      </CheckButton>
    </Commands>
  );
};

ChatCommands.propTypes = {
  routeToItem: PropTypes.func,
};

export default ChatCommands;
