import React from "react";
import IconButton from "../../components/common/IconButton";

const DirectoryListTableHeader = ({ children }) => {
  return (
    <div className="table-responsive text-nowrap py-2">
      <table className="table px-2">
        <thead>
          <tr>
            <th colSpan={2} className="text-start">
              <div className="d-flex align-items-center gap-1">
                <span>Name</span>
              </div>
            </th>
            <th className="px-2 text-start">
              <div className="d-flex align-items-center gap-1">
                <span>Email</span>
              </div>
            </th>
            <th className="mx-2 text-start">
              <div className="d-flex align-items-center gap-1">
                <span>Phone</span>
              </div>
            </th>
            <th colSpan={2} className="mx-2 ps-20 text-start">
              <span>Organization</span>
            </th>
            <th className="mx-2 text-start">
              <span>Category</span>
            </th>
            <th className="text-start">
              <span>Action</span>
            </th>
          </tr>
        </thead>
        <tbody className="table-border-bottom-0 overflow-auto text-start">
          {children}
        </tbody>
      </table>
    </div>
  );
};

export default DirectoryListTableHeader;
