import React from 'react';
import PropTypes from 'prop-types';
import {styled} from '@mui/material';
import Dialog from '@mui/material/Dialog';
import Typography from '@mui/material/Typography';
import Grid from '@mui/material/Grid';

const Container = styled(Grid)`
  max-width: 650px;
  padding: ${({theme}) => theme.spacing(2)};
`;

const Example = ({children, title, actions, onClose, open}) => (
  <Dialog onClose={onClose} open={open}>
    <Container container flexDirection="column" gap={2} sx={{p: 2}}>
      {title && (
        <Grid item>
          <Typography variant="subtitle2" color="primary">
            {title}
          </Typography>
        </Grid>
      )}
      <Grid item>
        <Typography>{children}</Typography>
      </Grid>
      {actions && (
        <Grid item>
          <Grid container justifyContent="flex-end" alignItems="center" gap={1}>
            {actions}
          </Grid>
        </Grid>
      )}
    </Container>
  </Dialog>
);

Example.propTypes = {
  children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
  title: PropTypes.string,
  actions: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
  onClose: PropTypes.func,
  open: PropTypes.bool,
};

Example.defaultProps = {
  title: '',
  actions: null,
  onClose: () => null,
  open: false,
};

export default Example;