import { Link as RouterLink } from "@umijs/max";
import PropTypes from "prop-types";
import { forwardRef } from "react";
// @mui
import { Box, Link } from "@mui/material";
import { useTheme } from "@mui/material/styles";

// ----------------------------------------------------------------------

const Logo = forwardRef(({ disabledLink = false, sx, link, ...other }, ref) => {
  const theme = useTheme();

  const PRIMARY_LIGHT = theme.palette.primary.light;

  const PRIMARY_MAIN = theme.palette.primary.main;

  const PRIMARY_DARK = theme.palette.primary.dark;

  // OR using local (public folder)
  // -------------------------------------------------------
  // const logo = (
  //   <Box
  //     component="img"
  //     src="/logo/logo_single.svg" => your path
  //     sx={{ width: 40, height: 40, cursor: 'pointer', ...sx }}
  //   />
  // );

  const logo = (
    <Box
      ref={ref}
      component="div"
      sx={{
        width: 80,
        height: 50,
        display: "inline-flex",
        ...sx,
      }}
      {...other}
    >
      <img src="./logo.png" alt="" />
    </Box>
  );

  if (disabledLink) {
    return <>{logo}</>;
  }

  return (
    <Link to={"/"} component={RouterLink} sx={{ display: "contents" }}>
      {logo}
    </Link>
  );
});

Logo.propTypes = {
  sx: PropTypes.object,
  disabledLink: PropTypes.bool,
};

export default Logo;
