import { FC } from 'react';

import Dialog, { DialogProps } from '@material-hu/mui/Dialog';
import DialogActions from '@material-hu/mui/DialogActions';
import DialogContent from '@material-hu/mui/DialogContent';
import DialogTitle from '@material-hu/mui/DialogTitle';
import Typography from '@material-hu/mui/Typography';

import Button from '@material-hu/components/design-system/Buttons/Button';
import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';

export type ErrorDialogProps = DialogProps & {
  onAccept?: (event) => void;
  message?: string;
};

export const ErrorDialog: FC<ErrorDialogProps> = props => {
  const { onAccept, message, ...dialogProps } = props;

  const { t } = useTranslation();

  return (
    <Dialog {...dialogProps}>
      <DialogTitle>{t('ERROR')}</DialogTitle>
      <DialogContent>
        <Typography>{message || t('ERROR_GENERAL')}</Typography>
      </DialogContent>
      {onAccept && (
        <DialogActions>
          <Button onClick={onAccept}>{t('ACCEPT')}</Button>
        </DialogActions>
      )}
    </Dialog>
  );
};

export default ErrorDialog;