import PropTypes from "prop-types";
import PersonIcon from "../../icons/PersonIcon";
import MenuButton from "./MenuButton";

const AccountButton = ({
  theme = null,
  showAccount = true,
  onAccountToggle = () => {},
  accountToggled = false,
}) => {
  return (
    <button
      className={`tb-footer-button tb-footer-button-account${
        showAccount == false ? " tb-hidden" : ""
      }`}
      onClick={() => {
        onAccountToggle(!accountToggled);
      }}
    >
      <div
        className={`tb-footer-icon${
          accountToggled == true ? " tb-hidden" : ""
        }`}
      >
        <PersonIcon />
      </div>
      <div
        className={`tb-footer-icon-close${
          accountToggled == false ? " tb-hidden" : ""
        }`}
      >
        <MenuButton isInverted={false} theme={theme} toggled={true} />
      </div>
    </button>
  );
};

AccountButton.propTypes = {
  theme: PropTypes.shape({
    backgroundColor: PropTypes.any,
    textColor: PropTypes.any,
  }),
  showAccount: PropTypes.bool,
  onAccountToggle: PropTypes.func,
  accountToggled: PropTypes.bool,
};

export default AccountButton;