import { useState } from "react";
import MaterialTable from "material-table";
import { data } from "../data";

const MTable = () => {
//     let res
//   try {
//     res = axios.get("/getUserAccounts", {
//       data: {
//         username: "Duly",
//       },
//     });
//   } catch (error) {
//     console.log(error);
//   }
  const [selectedRow, setSelectedRow] = useState(null);
  const columns = [
    { title: "UserName", field: "username" },
    { title: "Stream Name", field: "streamName" },
    { title: "Stream URL", field: "streamURL" },
  ];
  return (
    <div style={{ maxWidth: "100%" }}>
      <MaterialTable
        columns={columns}
        data={res}
        title="Books Directory"
        onRowClick={(evt, selectedRow) =>
          setSelectedRow(selectedRow.tableData.id)
        }
        options={{
          search: false,
          rowStyle: (rowData) => ({
            backgroundColor:
              selectedRow === rowData.tableData.id ? "#67aeae" : "#FFF",
          }),
        }}
      />
    </div>
  );
};
export default MTable;