import React from "react";
import { useOrganizationModal } from "../../hooks/useOrganization";
import { useSelectedProject } from "../../slices/apiDataManager";
import ProjectAssignedOrgs from "./ProjectOrganization/ProjectAssignedOrgs";

const ProjectOrganizations = () => {
  const { onOpen, startStep, flowType } = useOrganizationModal();
  const selectedProject = useSelectedProject();
  return (
    <div className="card pb-10" >
      <div className="card-header">
        <div className="d-flex justify-content-end px-2">
          <button
            type="button"
            className="link-button btn btn-sm rounded-md link-button-sm m-1 btn-primary"
            onClick={() => onOpen({ startStep: 1, flowType: "assign" })}
          >
            <i className="bx bx-plus-circle me-2"></i>
            Add Organization
          </button>
        </div>
      </div>

      <div className="row">
        <ProjectAssignedOrgs />
      </div>
    </div>
  );
};

export default ProjectOrganizations;