import React, { useState } from "react";
import { useTenants } from "../../hooks/useTenant";
import { ITEMS_PER_PAGE } from "../../utils/constants";

const TenantsList = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const { data, isLoading, isError, isInitialLoading, error } = useTenants(
    ITEMS_PER_PAGE,
    currentPage
  );

  const paginate = (page) => {
    if (page >= 1 && page <= (data?.totalPages ?? 1)) {
      setCurrentPage(page);
    }
  };

  if (isInitialLoading)
    return (
      <div>
        <h1>Loading...</h1>
      </div>
    );
  if (isError) return <div>{error}</div>;
  return (
    <div className="card p-2">
      <div className="text-end">
        <button className="bt btn-sm btn-primary me-2">
          <span class="icon-base bx bx-pie-chart-alt me-1"></span>Create Tenant
        </button>
      </div>
      <div class="card-datatable text-nowrap table-responsive"></div>
    </div>
  );
};

export default TenantsList;