import PropTypes from "prop-types";
import { Link } from "react-router-dom";

// material-ui
import { ButtonBase } from "@mui/material";

// project import
import LogoMain from "./LogoMain";
import LogoIcon from "./LogoIcon";
import nearleLogo from "../../assets/images/nearleLogo.png";
import nearleFavicon from "../../assets/images/nearleFavicon.png";
import { APP_DEFAULT_PATH } from "config";

// ==============================|| MAIN LOGO ||============================== //

const LogoSection = ({ reverse, isIcon, sx, to }) => (
  <ButtonBase
    disableRipple
    component={Link}
    to={!to ? APP_DEFAULT_PATH : to}
    sx={sx}
  >
    {isIcon ? (
      // <LogoIcon />
      <img src={nearleFavicon} alt="nearleFavicon" style={{ width: 40 }} />
    ) : (
      // <LogoMain reverse={reverse} />
      <img src={nearleLogo} alt="nearleLogo" style={{ width: "auto" }} />
    )}
  </ButtonBase>
);

LogoSection.propTypes = {
  reverse: PropTypes.bool,
  isIcon: PropTypes.bool,
  sx: PropTypes.object,
  to: PropTypes.string,
};

export default LogoSection;
