import { DataGrid } from "@mui/x-data-grid";
import type { GridRowsProp, GridColDef } from "@mui/x-data-grid";
import Container from '@mui/material/Container';
import { ruRU } from '@mui/x-data-grid/locales';
import type { tGroup } from "../groupdata";
type GroupProps = {
 data: tGroup;
};

function GroupGrid({ data }: GroupProps) {
  const rows: GridRowsProp = data;
  const columns: GridColDef[] = [
    { field: 'Группа', headerName: 'Группа', flex: 1},
    { field: 'Минимальная высота', flex: 0.5},
    { field: 'Максимальная высота', flex: 0.5},
    { field: 'Средняя высота', flex: 0.5},
  ]
  return (
   <Container maxWidth="lg" sx={{height: '700px', mt: '20px'}}>
     <DataGrid
       localeText={ruRU.components.MuiDataGrid.defaultProps.localeText}
       rows={rows}
       columns={columns}
    />
   </Container>
 )
}

export default GroupGrid;