import React from 'react';
import { Modal, Box } from '@mui/material';
import SellerDisclosureDisplay from '../Documents/SellerDisclosureDisplay';
import { SellerDisclosureData, Property } from '../Documents/SellerDisclosureDisplay';

interface SellerDisclosureDialogProps {
  open: boolean;
  onClose: () => void;
  disclosureData: SellerDisclosureData;
  property: Property;
}

const style = {
  position: 'absolute' as 'absolute',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  width: '80%', // Make it wider to accommodate the display
  maxWidth: '900px',
  bgcolor: 'background.paper',
  border: '2px solid #000',
  boxShadow: 24,
  p: 4,
  overflowY: 'auto',
  maxHeight: '90vh',
};

const SellerDisclosureDialog: React.FC<SellerDisclosureDialogProps> = ({
  open,
  onClose,
  disclosureData,
  property,
}) => {
  return (
    <Modal
      open={open}
      onClose={onClose}
      aria-labelledby="seller-disclosure-modal-title"
      aria-describedby="seller-disclosure-modal-description"
    >
      <Box sx={style}>
        <SellerDisclosureDisplay disclosureData={disclosureData} property={property} />
      </Box>
    </Modal>
  );
};

export default SellerDisclosureDialog;
