import { FC, ReactNode } from 'react';

import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import HuMenuItem from '@material-hu/components/design-system/Menu/components/MenuItem';

export type GenericMenuItemProps = {
  onClick: () => void;
  icon?: ReactNode;
  description: string;
  disabled?: boolean;
};

const GenericMenuItem: FC<GenericMenuItemProps> = props => {
  const { onClick, icon = null, description, disabled } = props;

  return (
    <HuMenuItem
      aria-label={description}
      onClick={onClick}
      disabled={disabled}
      sx={{ width: '100%' }}
    >
      <Stack
        gap={1}
        flexDirection="row"
        justifyContent="flex-start"
        alignItems="center"
      >
        {icon}
        <Typography variant="globalM">{description}</Typography>
      </Stack>
    </HuMenuItem>
  );
};

export default GenericMenuItem;