import * as React from 'react';
import {
  Table, TableBody, TableCell, TableContainer, TableHead,
  TableRow, Paper, ButtonBase
} from '@mui/material'

import { DisabledByDefault } from '@mui/icons-material'

export function MailTable(props) {

  let { users, remove } = props;

  return (
    <TableContainer component={Paper}>
      <Table aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>Correo</TableCell>
            <TableCell align="right">Nombres</TableCell>
            <TableCell align="right">Apellidos</TableCell>
            <TableCell align="right"></TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {users ? users.map((row, i) => (
            <TableRow key={i} sx={{ '&:last-child td, &:last-child th': { border: 0 } }} >
              <TableCell component="th" scope="row">
                {row.mail}
              </TableCell>
              <TableCell align="right">{row.nombres}</TableCell>
              <TableCell align="right">{row.apellidos}</TableCell>
              <TableCell align="right">
                <ButtonBase>
                  <DisabledByDefault onClick={() => remove(row.mail)} style={{color:'var(--main)'}} />
                </ButtonBase>
              </TableCell>
            </TableRow>
          )) : null}
        </TableBody>
      </Table>
    </TableContainer>
  );
}
