import { Component, JSXElement } from 'solid-js';
import {
  Dialog as MuiDialog,
  DialogContent,
  DialogTitle,
  Grid,
  IconButton,
} from '@suid/material';
import CloseIcon from '@suid/icons-material/Close';

const Dialog: Component<{
  open: boolean;
  title: JSXElement;
  closeHandler: (event: any, reason?: string) => void;
  children: JSXElement;
}> = (props) => {
  return (
    <MuiDialog
      onClose={props.closeHandler}
      open={props.open}
      PaperProps={{ sx: { minWidth: '300px' } }}
    >
      <DialogTitle
        sx={{
          backgroundColor: 'rgba(14, 116, 144, 0.7)',
          color: 'white',
          clear: 'both',
          paddingRight: '20px',
        }}
      >
        <Grid container spacing={2} alignItems='center'>
          <Grid item xs={11}>
            {props.title}
          </Grid>
          <Grid
            item
            xs={1}
            sx={{
              alignSelf: 'right',
              marginRight: '0px',
              paddingRight: '0px',
              paddingTop: '16px',
            }}
          >
            <IconButton onClick={props.closeHandler}>
              <CloseIcon />
            </IconButton>
          </Grid>
        </Grid>
      </DialogTitle>
      <DialogContent sx={{ width: 'calc(100% - 60px)' }}>
        {props.children}
      </DialogContent>
    </MuiDialog>
  );
};

export default Dialog;