import React, { useState } from "react";
import Breadcrumb from "../../components/common/Breadcrumb";
import { useOrganizationModal } from "../../hooks/useOrganization";
import OrganizationsList from "../../components/Organization/OrganizationsList";

const OrganizationPage = () => {
  const orgModal = useOrganizationModal()
  const [searchText,setSearchText] = useState("")

  return (
    <div className="container-fluid">
      <Breadcrumb
        data={[{ label: "Home", link: "/" }, { label: "Organizations" }]}
      />
      <div className="card my-3 px-sm-2 px-0">
        <div className="card-body py-2 px-3">
          <div className="row align-items-center">
            <div className="col-6 d-flex  ">
              <div className="d-flex align-items-center">
                <input
                  type="search"
                  value={searchText}
                  onChange={(e)=>setSearchText(e.target.value)}
                  className="form-control form-control-sm w-auto"
                  placeholder="Search Organization"
                  aria-describedby="search-label"
                />
              </div>
            </div>

            <div className="col-6  text-end mt-2 mt-sm-0">
              <button
                type="button"
                className="p-1 me-1 m-sm-0  bg-primary rounded-circle"
                title="Add New Organization"
                onClick={()=>orgModal.onOpen()}
              >
                <i className="bx bx-plus fs-4 text-white"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
      <OrganizationsList searchText={searchText}/>

    </div>
  );
};

export default OrganizationPage;