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 { isOpen, orgData, startStep, onOpen, flowType } =
    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
                className="btn btn-sm btn-primary"
                type="button"
                onClick={() => onOpen({ startStep: 2, flowType: "default" })}
              >
                 <i className="bx bx-plus-circle me-2"></i>
                  <span className="d-none d-md-inline-block">
                    Add New Organization
                  </span>
              </button>
            </div>
          </div>
        </div>
      </div>
      <OrganizationsList searchText={searchText} />

    </div>
  );
};

export default OrganizationPage;