import React, { FC, ReactNode } from 'react'
import { StyledMenuItem } from './styled'
import {
	ListItemIcon,
	MenuItemProps as MuiMenuItemProps,
	Typography,
} from '@mui/material'

type MenuItemProps = {
	onClick: () => void
	title: string
	Icon: ReactNode
} & MuiMenuItemProps

export const MenuItem: FC<MenuItemProps> = ({ onClick, Icon, title }) => {
	return (
		<StyledMenuItem onClick={onClick}>
			<ListItemIcon>{Icon}</ListItemIcon>
			<Typography fontWeight={500} variant='body2' noWrap>
				{title}
			</Typography>
		</StyledMenuItem>
	)
}
