text: import React, { useEffect, useState } from 'react';
  import PropTypes from 'prop-types';
  import { FetchData } from '../../lib/api';
  
  // components
  
  // import TableDropdown from 'components/Dropdowns/TableDropdown.js';
  
  export default function CardTable({ color }) {
    const [events, setEvents] = useState({ data: [], limit: -1 });
  
    useEffect(() => {
      async function fetchData() {
        var events = await FetchData(`/v1/events?limit=50`);
        setEvents(events);
      }
      fetchData();
    }, []);
  
    return (
      <>
        <div
          className={
            'relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded ' +
            (color === 'light' ? 'bg-white' : 'bg-gray-800 text-white')
          }>
          <div className="rounded-t mb-0 px-4 py-3 border-0">
            <div className="flex flex-wrap items-center">
              <div className="relative w-full px-4 max-w-full flex-grow flex-1">
                <h3 className={'font-semibold text-lg ' + (color === 'light' ? 'text-gray-800' : 'text-white')}>
                  Event Logs
                </h3>
              </div>
            </div>
          </div>
          <div className="block w-full overflow-x-auto">
            {/* Projects table */}
            <table className="items-center w-full bg-transparent border-collapse">
              <thead>
                <tr>
                  <th
                    className={
                      'text-center px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-no-wrap font-semibold text-left ' +
                      (color === 'light'
                        ? 'bg-gray-100 text-gray-600 border-gray-200'
                        : 'bg-gray-700 text-gray-300 border-gray-600')
                    }>
                    Id
                  </th>
                  <th
                    className={
                      'text-center px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-no-wrap font-semibold text-left ' +
                      (color === 'light'
                        ? 'bg-gray-100 text-gray-600 border-gray-200'
                        : 'bg-gray-700 text-gray-300 border-gray-600')
                    }>
                    Message
                  </th>
  
                  <th
                    className={
                      'text-center px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-no-wrap font-semibold text-left ' +
                      (color === 'light'
                        ? 'bg-gray-100 text-gray-600 border-gray-200'
                        : 'bg-gray-700 text-gray-300 border-gray-600')
                    }>
                    Description
                  </th>
                  <th
                    className={
                      'text-center px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-no-wrap font-semibold text-left ' +
                      (color === 'light'
                        ? 'bg-gray-100 text-gray-600 border-gray-200'
                        : 'bg-gray-700 text-gray-300 border-gray-600')
                    }>
                    Path
                  </th>
                  <th
                    className={
                      'text-center px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-no-wrap font-semibold text-left ' +
                      (color === 'light'
                        ? 'bg-gray-100 text-gray-600 border-gray-200'
                        : 'bg-gray-700 text-gray-300 border-gray-600')
                    }>
                    Arguments
                  </th>
                  <th
                    className={
                      'text-center px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-no-wrap font-semibold text-left ' +
                      (color === 'light'
                        ? 'bg-gray-100 text-gray-600 border-gray-200'
                        : 'bg-gray-700 text-gray-300 border-gray-600')
                    }>
                    Author
                  </th>
                  <th
                    className={
                      'text-center px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-no-wrap font-semibold text-left ' +
                      (color === 'light'
                        ? 'bg-gray-100 text-gray-600 border-gray-200'
                        : 'bg-gray-700 text-gray-300 border-gray-600')
                    }>
                    Created On
                  </th>
                  <th
                    className={
                      'text-center px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-no-wrap font-semibold text-left ' +
                      (color === 'light'
                        ? 'bg-gray-100 text-gray-600 border-gray-200'
                        : 'bg-gray-700 text-gray-300 border-gray-600')
                    }>
                    Body
                  </th>
                  {/* <th
                    className={
                      'text-center px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-no-wrap font-semibold text-left ' +
                      (color === 'light'
                        ? 'bg-gray-100 text-gray-600 border-gray-200'
                        : 'bg-gray-700 text-gray-300 border-gray-600')
                    }></th> */}
                </tr>
              </thead>
              <tbody>
                {events != null && Array.isArray(events.data)
                  ? events.data.map(val => (
                      <>
                        <tr>
                          <th className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4 text-left flex items-center">
                            {/* <img
                              src={require('assets/img/bootstrap.jpg')}
                              className="h-12 w-12 bg-white rounded-full border"
                              alt="..."></img>{' '} */}
                            <span className={'ml-3 font-bold ' + +(color === 'light' ? 'text-gray-700' : 'text-white')}>
                              {val.sapo_id}
                            </span>
                          </th>
                          <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4">
                            <div dangerouslySetInnerHTML={{ __html: val.message }} />
                          </td>
                          <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4">
                            {val.description}
                          </td>
                          <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4">
                            {val.path}
                          </td>
  
                          <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4">
                            {JSON.stringify(val.arguments)}
                          </td>
  
                          <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4">
                            {val.author}
                          </td>
  
                          <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4">
                            {new Date(val.created_on).toLocaleString('vi-VN')}
                          </td>
                          <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4">
                            {val.body}
                          </td>
                          {/* <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-no-wrap p-4 text-right">
                            <TableDropdown />
                          </td> */}
                        </tr>
                      </>
                    ))
                  : ''}
              </tbody>
            </table>
          </div>
        </div>
      </>
    );
  }
  
  CardTable.defaultProps = {
    color: 'light',
  };
  
  CardTable.propTypes = {
    color: PropTypes.oneOf(['light', 'dark']),
  };
  