import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons";
import { openLoginModal } from "../../lib/helpers";
const LogoutValue = () => {
  return (
    <div className="d-flex flex-column gap-3 mb-3">
      <div
        className="shadow-sm text-white px-3 py-2 overflow-auto"
        style={{ background: "rgb(91, 89, 76)" }}
      >
        <p
          className="text-uppercase fw-bold text-center mb-0 d-flex align-items-center justify-content-center gap-3"
          style={{ fontSize: "12px" }}
        >
          <FontAwesomeIcon
            icon={faTriangleExclamation}
            style={{ fontSize: "20px" }}
          />{" "}
          <span>
            <span data-hoverable onClick={openLoginModal}>
              Log in
            </span>
            to compare volume data with currencies
          </span>
        </p>
      </div>
    </div>
  );
};
export default LogoutValue;