import React from 'react';
import PropTypes from 'prop-types';
import Pagination from '@/components/Pagination';

const Table = ({
  data,
  columns,
  renderCell,
  itemsPerPage = 0,
  currentPage = 1,
  totalPages = 1,
  onPageChange = () => {},
  onRowClick,
  selectedRows,
  isSelectable = false,
  defaultTheme = 'bg-primary/5',
  emptyMessage = null,
}) => {
  const handlePageChange = (newPage) => {
    onPageChange(newPage);
  };

  if ((!data || data.length === 0) && emptyMessage) {
    return <div className="w-full">{emptyMessage}</div>;
  }

  return (
    <div className="md:bg-white md:rounded-md md:border md:border-gray-200 md:shadow-sm">
      <table className="responsive-table min-w-full bg-white">
        <thead className="uppercase">
          <tr>
            {columns.map((column, index) => (
              <th
                key={index}
                className="py-2 px-4 border-b border-gray-200 bg-neutral text-center text-sm font-label font-semibold text-gray-700"
              >
                {column.name}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {data && data.length > 0 ? (
            data.map((row, rowIndex) => (
              <tr
                key={rowIndex}
                className={`
                  ${isSelectable ? 'cursor-pointer' : ''}
                  ${
                    selectedRows?.includes(row.id)
                      ? 'bg-primary/20 text-white'
                      : rowIndex % 2 === 0
                        ? `${defaultTheme}`
                        : 'bg-white'
                  }
                  ${isSelectable ? 'hover:bg-primary/10' : ''}
                `}
                onClick={() => {
                  if (isSelectable && onRowClick) {
                    if (selectedRows?.includes(row.id)) {
                      onRowClick({ deselected: true, row });
                    } else {
                      onRowClick(row);
                    }
                  }
                }}
              >
                {columns.map((column, colIndex) => (
                  <td
                    key={colIndex}
                    data-label={column.name}
                    className={`py-2 px-4 border-b border-gray-200 text-center text-sm ${
                      selectedRows?.includes(row.id)
                        ? 'text-white'
                        : 'text-gray-700'
                    }`}
                  >
                    {renderCell
                      ? renderCell(row, column.name)
                      : column.transform(row)}
                  </td>
                ))}
              </tr>
            ))
          ) : (
            <tr>
              <td colSpan={columns.length}>{emptyMessage}</td>
            </tr>
          )}
        </tbody>
      </table>
      {itemsPerPage > 0 && totalPages > 1 && data && data.length > 0 && (
        <Pagination
          currentPage={currentPage}
          totalPages={totalPages}
          onPageChange={handlePageChange}
        />
      )}
    </div>
  );
};

Table.propTypes = {
  data: PropTypes.arrayOf(PropTypes.object).isRequired,
  columns: PropTypes.arrayOf(
    PropTypes.shape({
      name: PropTypes.string.isRequired,
      transform: PropTypes.func.isRequired,
    })
  ).isRequired,
  renderCell: PropTypes.func,
  itemsPerPage: PropTypes.number,
  currentPage: PropTypes.number,
  totalPages: PropTypes.number,
  onPageChange: PropTypes.func,
  onRowClick: PropTypes.func,
  selectedRows: PropTypes.arrayOf(PropTypes.any),
  isSelectable: PropTypes.bool,
  defaultTheme: PropTypes.string,
};

export default Table;
