import React from 'react';
import { Grid as MuiGrid, Paper, Typography, GridProps as MuiGridProps } from '@mui/material';


export interface GridProps extends MuiGridProps {

}

export const Grid = ({ ...rest }: GridProps) => {
  return (
    <MuiGrid container spacing={2} {...rest}>
      <MuiGrid item xs={12}>
        <Paper style={{ padding: 16 }}>
          <Typography variant="h6">Grid Item 1</Typography>
          <Typography>This is the content of Grid Item 1.</Typography>
        </Paper>
      </MuiGrid>
      <MuiGrid item xs={6}>
        <Paper style={{ padding: 16 }}>
          <Typography variant="h6">Grid Item 2</Typography>
          <Typography>This is the content of Grid Item 2.</Typography>
        </Paper>
      </MuiGrid>
      <MuiGrid item xs={6}>
        <Paper style={{ padding: 16 }}>
          <Typography variant="h6">Grid Item 3</Typography>
          <Typography>This is the content of Grid Item 3.</Typography>
        </Paper>
      </MuiGrid>
    </MuiGrid>
  );
};