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 { gropuedPrices } from "../../data";
type GroupProps = {
 data: typeof gropuedPrices[number];
};

function GroupGrid({ data }: GroupProps) {
  const rows: GridRowsProp = data;
  const columns: GridColDef[] = [
    { field: 'group', headerName: 'Group', flex: 1},
    { field: 'min', headerName: 'Price min', flex: 0.5},
    { field: 'max', headerName: 'Price max', flex: 0.5},
    { field: 'mean',headerName: 'Price mean',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;