import React, { useState, useEffect } from "react";
import { Table } from "antd";
import PropTypes from "prop-types";

// import { Table } from 'antd';

// import PortletTable from "./../../../components/portlet-table/portlet-table";

/**
 * Use `Card` for Card you need to keep.
 */
export default function TableComponent({
    loading,
    summary,
    className,
    pagination,
    columns,
    data,
}) {
   
    {
        return (
            <div className={''}>


                {/* <PortletTable

                columns={columns}

                records={data}

            /> */}
                <Table
                    rowKey={obj => obj.id}
                    // ref={(ref) => { tableRef = ref }}
                    columns={columns}
                    className={`table-exportable ${className}`}
                    scroll={{ x: true }}
                    loading={loading}
                    size="small"
                    dataSource={data}
                    pagination={pagination}
                    summary={summary}
                ></Table>
            </div>
        );
    }
}

TableComponent.propTypes = {
    /** The loading prop is a boolean that indicates whether the table is in a loading state or not.  */
    loading: PropTypes.bool,
    /** className prop is a string of additional CSS classes to apply to the table. */
    className: PropTypes.string,
    /** pagination prop is an object that can be used to configure pagination for the table.  */
    pagination: PropTypes.object,
    /** The summary prop is a string that provides a summary of the contents of the table. */
    summary: PropTypes.string,
};

TableComponent.defaultProps = {
    loading: false,
    summary: null,
    className: '',
    pagination: null,
};
