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 './MobileLogo';
import config from 'config';
import { activeItem } from 'store/reducers/menu';
import {useIntl} from "react-intl";

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

const LogoSection = ({ sx, to }) => {
  const intl = useIntl();

  const { defaultId } = useSelector((state) => state.menu);
  const dispatch = useDispatch();
  return (
    <ButtonBase
    disableRipple
    component={Link}
    onClick={() => dispatch(activeItem({ openItem: [defaultId] }))}
    to={!to ? config.defaultPath : to}
    aria-label={intl.formatMessage({ id: "PNSPS" })} 
    sx={{
      ...sx,

      /* WCAG 2.4.7 – visible keyboard focus */
      '&:focus-visible': {
        outline: '3px solid #0C489E',
        outlineOffset: '2px',
        borderRadius: '6px'
      }
    }}
  >
    <Logo />
  </ButtonBase>
  );
};

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

export default LogoSection;