import React, {useMemo} from 'react';
import {useTable} from 'react-table';
import {COLUMNS} from './columns';
import MOCK_DATA from './MOCK_DATA.json';


const BasicTable = () => {


    const columns = React.useMemo(() => COLUMNS, [])
    const data = useMemo(() => MOCK_DATA,[])

   const tableInstance = useTable({
        columns,
        data,
    })

    const { getTableProps, getTableBodyProps,headerGroups,rows,prepareRow, } = tableInstance

    return (
        
        <table {...getTableProps()} className="min-w-full divide-y divide-gray-200">

            <thead className="bg-gray-300">
                {headerGroups.map((headerGroup) => (
                <tr {...headerGroup.getHeaderGroupProps()}>
                    {headerGroup.headers.map((column) => (
                        <th {...column.getHeaderProps()} scope="col" className="px-6 py-3 text-right text-xs" style={{color: '#3287B9'}}>
                            {column.render('Header')}
                        </th>
                    ))}
                </tr>
                ))} 
            </thead>

            <tbody {...getTableBodyProps()} className="bg-white divide-y divide-gray-200">
                {rows.map((row) => {
                    prepareRow(row)
                    return(
                        <tr {...row.getRowProps()}>
                            {row.cells.map((cell) => {
                                return <td {...cell.getCellProps()} className="px-6 py-4 whitespace-nowrap" role="cell">
                                    {cell.render('Cell')}
                                </td>
                            })}
                        </tr>
                    )
                })}
            </tbody>

        </table>
    )

};

export default BasicTable;