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}>
              <div className="d-flex align-items-center gap-1">
                <span>Name</span>
              </div>
            </th>
            <th className="px-2 text-start">
              <div className="d-flex text-center align-items-center gap-1 justify-content-start">
                <span>Email</span>
              </div>
            </th>
            <th className="mx-2">
              <div className="d-flex align-items-center m-0 p-0 gap-1">
                <span>Phone</span>
              </div>
            </th>
            <th colSpan={2} className="mx-2 ps-20">
              Organization
            </th>
            <th className="mx-2">Category</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody className="table-border-bottom-0 overflow-auto">
          {children}
        </tbody>
      </table>
    </div>
  );
};
export default DirectoryListTableHeader;