// material-ui
import {
    Box,
    Typography
} from '@mui/material';
import MainCard from "components/MainCard";
import * as React from "react";
import { FiDataGrid } from "components/FiDataGrid";


// ==============================|| DASHBOARD - DEFAULT ||============================== //
const Table = ({onRowClick, dataList}) => {
    const [rows, setRows] = React.useState(dataList);

    React.useEffect(() => {
        setRows(dataList);
    }, [dataList]);

    const columns = [
        {
            field: 'name',
            headerName: 'Name',
            width: 300,
        },
        {
            id: 'type',
            field: 'type',
            headerName: 'Type',
            width: 150,
            valueGetter: (params) => {
                return params.row.type
            }
        },
        {
            id: 'category',
            field: 'category',
            headerName: 'Category',
            width: 150,
        },
        {
            id: 'value',
            field: 'value',
            headerName: 'Value',
            flex: 1
        },
    ];
    return (
     
            <MainCard elevation={0}
                      border={false}
                      content={false}
                      height='100%'
            >
                <Typography variant="h5" sx={{mt: 3, ml: 3, mr: 3, borderBottom: "1px solid black"}}>
                    System Params
                </Typography>

                <div style={{ width: '100%' }}>
                <Box sx={{ backgroundColor: "#fff", ml: 2 }} height='100%'>
                    <FiDataGrid
                        rows={rows}
                        columns={columns}
                        customPageSize={10}
                        getRowHeight={() => 'auto'}
                        onRowClick={onRowClick}
                    />
                </Box>
            </div>
            </MainCard>
    );
};

export default Table;
