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

import { DISCLAIMER_MODAL } from '../../constants';

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

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

function DisclaimerModal(props) {
  const handleClose = () => {
    props.onClose();
  };

  return (
    <Dialog open={props.modal === DISCLAIMER_MODAL} onClose={handleClose} aria-labelledby="disclaimer-modal">
      <DialogTitle onClose={props.onClose}>Real-Time Data Disclaimer</DialogTitle>
      <DialogContent className={styles.Content}>
        <Typography variant="subtitle2" color="text.primary" fontWeight={400}>
          Note: The data shown here is updated in real time and intended for monitoring purposes only. Final billing
          calculations are based exclusively on the numbers available in the Analytics section.
        </Typography>
      </DialogContent>
      <DialogActions className={styles.Actions}>
        <Button size="small" variant="contained" color="primary" onClick={handleClose}>
          Confirm
        </Button>
      </DialogActions>
    </Dialog>
  );
}

DisclaimerModal.propTypes = {
  modal: PropTypes.shape({
    id: PropTypes.string,
    supplyIds: PropTypes.arrayOf(PropTypes.string),
  }).isRequired,
  onClose: PropTypes.func.isRequired,
  onSave: PropTypes.func.isRequired,
};

export default DisclaimerModal;
