import { Paper, Box } from '@mui/material';

function GenericWidget({ title, data, children, sx, headerAction, ...props }) {
  return (
    <Paper
      elevation={2}
      sx={{
        p: 2,
        minWidth: 300,
        ...sx
      }}
      {...props}
    >
      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 1 }}>
        <h2 className="widget-title" style={{ margin: 0 }}>{title}</h2>
        {headerAction}
      </Box>
      <Box>
        {children || <p>{JSON.stringify(data)}</p>}
      </Box>
    </Paper>
  );
}

export default GenericWidget;
