1  import { Box, Typography } from '@mui/material';
 2  import React, { ReactNode } from 'react';
 3  
 4  type ReserveOverviewBoxProps = {
 5    children: ReactNode;
 6    title?: ReactNode;
 7    fullWidth?: boolean;
 8  };
 9  
10  export function ReserveOverviewBox({
11    title,
12    children,
13    fullWidth = false,
14  }: ReserveOverviewBoxProps) {
15    return (
16      <Box
17        sx={(theme) => ({
18          borderRadius: '6px',
19          border: `1px solid ${theme.palette.divider}`,
20          flex: fullWidth ? '0 100%' : '0 32%',
21          marginBottom: '2%',
22          maxWidth: fullWidth ? '100%' : '32%',
23        })}
24      >
25        <Box
26          sx={{
27            display: 'flex',
28            flexDirection: 'column',
29            height: '100%',
30            justifyContent: 'space-around',
31            padding: '8px',
32          }}
33        >
34          {title && (
35            <Typography variant="secondary14" color="text.secondary" component="span">
36              {title}
37            </Typography>
38          )}
39          {children}
40        </Box>
41      </Box>
42    );
43  }