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

// material-ui
import { ButtonBase } from '@mui/material';
import { useDispatch, useSelector } from 'react-redux';

// project import
import Logo from './AdminLogo';

import config from 'config';
import { activeItem } from 'store/reducers/menu';
import { Stack } from '@mui/material';
import {
  checkSysEnv
} from "utils/Utils";

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

const LogoSection = ({ sx, to }) => {
  const { defaultId } = useSelector((state) => state.menu);
  const dispatch = useDispatch();
  return (
    <Stack direction="column" justifyContent="center" alignItems="center" >
        <ButtonBase
          disableRipple
          component={Link}
          onClick={() => dispatch(activeItem({ openItem: [defaultId] }))}
          to={!to ? config.defaultPath : to}
          sx={sx}
        >
          <Logo />
        </ButtonBase>
        <span style={{ color: checkSysEnv()!=''?'red':'#0C489E'}} id="systemTitle">PNSPS</span>
    </Stack>

  );
};

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

export default LogoSection;