content: import React from 'react';
  import { injectIntl } from 'react-intl';
  import PropTypes from 'prop-types';
  import { Grid, Tooltip } from '@mui/material';
  import SimpleModal from './Navigation/SimpleModal';
  import config from '../configs/config';
  
  const FoodImage = ({ letter, age, filename, intl }) => {
    const tip = intl.formatMessage({ id: 'click.image' });
    if (filename !== null) {
      return (
        <Grid item xs={1} key={`image_${letter}`}>
          <SimpleModal title={letter}>
            <Tooltip title={tip} placement="top">
              <img
                src={`${config.photos}/${age}/${filename}`}
                alt={filename}
                width="100%"
              />
            </Tooltip>
          </SimpleModal>
        </Grid>
      );
    }
    return (
      <Grid item xs={1} key={`image_${letter}`}>
        &nbsp;
      </Grid>
    );
  };
  FoodImage.propTypes = {
    letter: PropTypes.string.isRequired,
    age: PropTypes.string.isRequired,
    filename: PropTypes.string,
    // eslint-disable-next-line react/forbid-prop-types
    intl: PropTypes.object.isRequired,
  };
  
  export default injectIntl(FoodImage);
  