import React, { useEffect } from 'react';

// Icons
// import { FiCalendar, FiMessageCircle, FiLogOut, FiUsers } from 'react-icons/fi';

import { CardDashboard, Card } from '~/components/Card';
import { Table } from '~/components/Table';

import { getToken } from '~/services/auth';
import { FiEdit, FiInfo, FiTrash } from 'react-icons/fi';

const config = {
    headers: {
        'Authorization': `Bearer ${getToken}`
    }
};

let array = [
    {
        id: 1,
        name: 'Luis Otávio',
    },
    {
        id: 2,
        name: 'Fernando Moreira',
    },
    {
        id: 3,
        name: 'José Augusto',
    },
    {
        id: 2,
        name: 'Jonathan Moreira',
    },
]

export default function TablesPage() {

    useEffect(() => {
        document.title = 'Tables'
    }, []);

    return (
        <>
            <div className="col-12 title">
                <h1>Tables</h1>
            </div>
            <div className="col-12 px-0">
                <Card className="red">
                    <div className="card-title">
                        <h3>Tables</h3>
                    </div>
                    <div className="card-body">
                        <Table>
                            <thead>
                                <tr>
                                    <th className="col-1">#</th>
                                    <th className="col-8">Name</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {array.map(item => (
                                    <tr>
                                        <td style={{ textAlign: 'center' }}>{ item.id }</td>
                                        <td style={{ textAlign: 'center' }}>{ item.name }</td>
                                        <td style={{ textAlign: 'center' }}>
                                            <button className="edit">
                                                <FiEdit />
                                            </button>
                                            <button className="info">
                                                <FiInfo />
                                            </button>
                                            <button className="eraser">
                                                <FiTrash />
                                            </button>
                                        </td>
                                    </tr>
                                ))}
                            </tbody>
                        </Table>
                    </div>
                </Card>
            </div>
        </>
    );
}