import { Divider, MenuItem as MuiMenuItem, useTheme } from '@mui/material';

import { type MenuItemProps } from './types';

export const MenuItem = ({
  id,
  selected,
  disabled,
  onClick,
  sx,
  children,
  divider = false,
  ...props
}: MenuItemProps) => {
  const theme = useTheme();

  return (
    <>
      <MuiMenuItem
        id={id}
        selected={selected}
        disabled={disabled}
        onClick={onClick}
        sx={{
          p: 2,
          flexDirection: 'row',
          justifyContent: 'flex-start',
          alignItems: 'center',
          '&:hover, &.Mui-selected, &.Mui-selected:hover': {
            backgroundColor: theme.palette.new.action.background.neutral.hover,
            transition: 'background-color 125ms ease-in-out',
          },
          ...sx,
        }}
        {...props}
      >
        {children}
      </MuiMenuItem>
      {divider && (
        <Divider
          sx={{
            '&.MuiDivider-root': {
              my: 0,
            },
          }}
        />
      )}
    </>
  );
};

export type { MenuItemProps };

export default MenuItem;
