import { IconButton } from '@mui/material'
import { useNavigate } from 'react-router-dom'
import { clogWheel } from '../../../../assets/images'
import DropDownButton from '../../../DropDownButton/DropDownButton'

const CogWheelMenu = ({ menu }) => {
  const navigate = useNavigate()

  return (
    <DropDownButton
      anchor={({ open }) => (
        <IconButton color="secondary" onClick={open}>
          <img src={clogWheel.default} alt="Settings" />
        </IconButton>
      )}
      menu={menu?.map((item) => ({
        label: item?.label,
        onClick: () => {
          item?.openNewTab
            ? window.open(item?.path, '_blank')
            : navigate(item?.path)
        },
      }))}
      menuProps={{
        PaperProps: { sx: { top: '56px !important' } },
        transformOrigin: {
          horizontal: 'center',
          vertical: 'top',
        },
      }}
    />
  )
}

export default CogWheelMenu
