import PropTypes from 'prop-types';
import Button from '@mui/material/Button';
import ErrorIcon from '@mui/icons-material/ErrorOutlineSharp';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import { useTranslation } from 'react-i18next';

/**
 * ManifestListItemError renders a component displaying a
 * message to the user about a problem loading a manifest
 */
export function ManifestListItemError({ manifestId, onDismissClick, onTryAgainClick }) {
  const { t } = useTranslation();
  return (
    <Grid container sx={{ alignItems: 'center', width: '100%' }}>
      <Grid container size={{ sm: 5, xs: 12 }} sx={{ alignItems: 'center' }}>
        <ErrorIcon
          sx={{
            color: 'error.main',
            height: '2rem',
            marginRight: '0.5rem',
            width: '2rem',
          }}
        />
        <Typography>{t('manifestError')}</Typography>
        <Typography sx={{ wordBreak: 'break-all' }}>{manifestId}</Typography>
      </Grid>

      <Grid container size={{ sm: 7, xs: 12 }}>
        <Button
          onClick={() => {
            onDismissClick(manifestId);
          }}
        >
          {t('dismiss')}
        </Button>
        <Button
          onClick={() => {
            onTryAgainClick(manifestId);
          }}
        >
          {t('tryAgain')}
        </Button>
      </Grid>
    </Grid>
  );
}

ManifestListItemError.propTypes = {
  manifestId: PropTypes.string.isRequired,
  onDismissClick: PropTypes.func.isRequired,
  onTryAgainClick: PropTypes.func.isRequired,
};