import React from "react";
import Box from "@mui/material/Box";
import { DataGrid } from "@mui/x-data-grid";

const columns = [
  { field: "id", headerName: "ID", width: 90 },
  {
    field: "name",
    headerName: "Name",
    width: 150,
  },
  {
    field: "next_run_at",
    headerName: "Next Run",
    width: 150,
  },
];

const rows = [
  { id: 1, name: "survey", next_run_at: "Mon 28 Aug 16:35:36 EDT 2023" },
  { id: 2, name: "survey", next_run_at: "Mon 28 Aug 16:35:36 EDT 2023" },
  { id: 3, name: "survey", next_run_at: "Mon 28 Aug 16:35:36 EDT 2023" },
  { id: 4, name: "survey", next_run_at: "Mon 28 Aug 16:35:36 EDT 2023" },
  { id: 5, name: "survey", next_run_at: "Mon 28 Aug 16:35:36 EDT 2023" },
  { id: 6, name: "survey", next_run_at: "Mon 28 Aug 16:35:36 EDT 2023" },
  { id: 7, name: "survey", next_run_at: "Mon 28 Aug 16:35:36 EDT 2023" },
  { id: 8, name: "survey", next_run_at: "Mon 28 Aug 16:35:36 EDT 2023" },
  { id: 9, name: "survey", next_run_at: "Mon 28 Aug 16:35:36 EDT 2023" },
];

export default function SurveysList() {
  return (
    <Box sx={{ minHeight: "100%", width: "100%" }}>
      <DataGrid
        rows={rows}
        columns={columns}
        initialState={{
          pagination: {
            paginationModel: {
              pageSize: 25,
            },
          },
        }}
        pageSizeOptions={[25, 50, 100]}
        checkboxSelection
        disableRowSelectionOnClick
      />
    </Box>
  );
}