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

import { type Icon, IconTypes } from 'src/types/icons';

type Props = {
  icon: Icon;
};

/**
 * @deprecated This component does not implement Hugo's design system.
 */
const FormImageMenuIcon = ({ icon }: Props) => (
  <Box
    sx={{
      backgroundColor: theme => theme.palette.new.background.elements.grey,
      p: 1.5,
      borderRadius: theme => theme.shape.borderRadiusM,
    }}
  >
    {icon?.type === IconTypes.IMAGE ? (
      <Box
        component="img"
        src={icon.value}
        alt="icon"
        sx={{ width: '40px', height: '40px' }}
      />
    ) : (
      // Emojis
      <Typography sx={{ fontSize: '40px', lineHeight: '40px' }}>
        {icon.value}
      </Typography>
    )}
  </Box>
);

export default FormImageMenuIcon;