import React from 'react';
import {Well, Table, Button} from 'react-bootstrap';
import FontAwesome from 'react-fontawesome';

/*
TableAdmin:
buttons = un arreglo de botones que tienen los parámetros ['text, href, className']
headers = un arregloque contiene las cabeceras de la tabla
nameClass= una clase
contents = un arreglo de contenidos

ObjectRow:
rows: un arreglo que contiene los campos de una fila
icons: un arreglo que contiene los iconos de una fila

*/

const ObjectRow = ({  rows = [],  icons = []  }) => {
    return (
        <tr>
            {
                rows.length ? (
                    rows.map((row, i) => <td key={`row${i}`}> {row} </td>)
                ) : (null)
            }
            {
                icons.length ? (
                  <td>
                    {
                        icons.map((icon, i) => <Button href={icon[1]}><FontAwesome key={`icon${i}`} className={'icon '+icon[2]} name={icon[0]}  /></Button>)
                    }
                  </td>
                ) : (null)
            }
        </tr>
    );
};

const TableAdmin = ({  headers = [], buttons = [], nameClass, contents = [], iconsRow = [] }) => {
    return [
        <div>
            <Table responsive striped className={nameClass}>
                <thead>
                    <tr>
                        {
                            headers.length ? (
                                headers.map((header, i) => <th key={`header${i}`}> {header} </th>)
                            ) : (null)
                        }
                    </tr>
                </thead>
                <tbody>
                    {
                        console.log(iconsRow),
                        contents.map((content, i) => <ObjectRow rows={content} icons={iconsRow}   /> )
                    }
                </tbody>
            </Table>
                 <div className="text-center">
                    {
                        buttons.length ? (
                            buttons.map((button, i) => <Button   key={`button${i}`}  className={button[2]} href={button[1]} >   {button[0]} </Button>)
                        ) : (null)
                    }
                </div>
        </div>
    ];
};

export default TableAdmin;