import * as React from 'react';
import { default as CustomToolbar} from '../Components/Password/CustomToolbar';

import { 
    Paper, Box, 
    // Table, TableBody, TableCell, TableContainer, TableRow, TablePagination, Switch, FormControlLabel, Checkbox,
} from '@mui/material';

import MUIDataTable from "mui-datatables";

export function Contrasv2() {



    const columns = ["Name", "Company", "City", "State"];

    const data = [
        ["Joe James", "Test Corp", "Yonkers", "NY"],
        ["John Walsh", "Test Corp", "Hartford", "CT"],
        ["Bob Herm", "Test Corp", "Tampa", "FL"],
        ["James Houston", "Test Corp", "Dallas", "TX"],
    ];


    const options = {
        filterType: 'checkbox',
        customToolbar: () => {
            return (
                <CustomToolbar />
            );
        }
    };

    return (
        <div className="content-section">
            <div className="main">
                <Box sx={{ width: '100%' }}>
                    <Paper sx={{ width: '100%', mb: 2 }}>
                        <MUIDataTable
                            title={"Contraseñas"}
                            data={data}
                            columns={columns}
                            options={options}
                        />
                    </Paper>
                </Box>
            </div>
        </div>
    );

}
