import React from 'react';

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

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

interface TermsDialogProps {
  isValidator: boolean;
  open: boolean;
  onClose: () => void;
}

const TermsAndConditionsDialog: React.FC<TermsDialogProps> = ({ isValidator, open, onClose }) => {
  return (
    <Dialog open={open} onClose={onClose}>
      <DialogTitle>Terms and Conditions</DialogTitle>
      <DialogContent>
        <Typography variant="h6" gutterBottom>
          Onboard as a {isValidator ? "validator" : "participant"}
        </Typography>
        <DialogContentText>
          <div dangerouslySetInnerHTML={{__html: TNC_CONTENT}} />
        </DialogContentText>
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose} color="primary">
          Close
        </Button>
      </DialogActions>
    </Dialog>
  );
};

export default TermsAndConditionsDialog;