import React from 'react';
import PropTypes from 'prop-types';

import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from '@/mui/components';

import styles from './MacrosModal.module.scss';

function MacrosModal(props) {
  return (
    <Dialog open={props.open} onClose={props.onClose} maxWidth="lg">
      <DialogTitle onClose={props.onClose}>{`${props.title} Macros`}</DialogTitle>
      <DialogContent>
        <Typography variant="body2" className={styles.Macros}>
          {props.macros}
        </Typography>
      </DialogContent>
      <DialogActions>
        <Button variant="outlined" color="primary" onClick={props.onClose}>
          Close
        </Button>
      </DialogActions>
    </Dialog>
  );
}

MacrosModal.propTypes = {
  open: PropTypes.bool.isRequired,
  title: PropTypes.string.isRequired,
  macros: PropTypes.string.isRequired,
  onClose: PropTypes.func.isRequired,
};

export default MacrosModal;
