import React from "react";
import {hasUserPermission} from "../../utils/authUtils";
import {useHasUserPermission} from "../../hooks/useHasUserPermission";
import { VIEW_PROJECT_INFRA} from "../../utils/constants";

const ProjectNav = ( {onPillClick, activePill} ) =>
{
  const HasViewInfraStructure = useHasUserPermission( VIEW_PROJECT_INFRA )
  
  return (
    <div className="col-md-12">
      <div className="nav-align-top">
        <ul className="nav nav-pills flex-column flex-sm-row mb-6">
          <li className="nav-item">
            <a
              className={`nav-link ${activePill === "profile" ? "active" : ""}`}
              href="#"
              onClick={(e) => {
                e.preventDefault(); // Prevent page reload
                onPillClick("profile");
              }}
            >
              <i className="bx bx-user bx-sm me-1_5"></i> Profile
            </a>
          </li>
          <li className="nav-item">
            <a
              className={`nav-link ${activePill === "teams" ? "active" : ""}`}
              href="#"
              onClick={(e) => {
                e.preventDefault(); // Prevent page reload
                onPillClick("teams");
              }}
            >
              <i className="bx bx-group bx-sm me-1_5"></i> Teams
            </a>
          </li>
          <li className={`nav-item ${!HasViewInfraStructure && 'd-none'} `}>
            <a
              className={`nav-link ${activePill === "infra" ? "active" : ""}`}
              href="#"
              onClick={(e) => {
                e.preventDefault(); // Prevent page reload
                onPillClick("infra");
              }}
            >
              <i className="bx bx-grid-alt bx-sm me-1_5"></i> Infrastructure
            </a>
          </li>
          <li className="nav-item">
            <a
              className={`nav-link ${
                activePill === "workplan" ? "active" : ""
              }`}
              href="#"
              onClick={(e) => {
                e.preventDefault(); // Prevent page reload
                onPillClick("workplan");
              }}
            >
              <i className="bx bx-link bx-sm me-1_5"></i> Work Plan
            </a>
          </li>
          <li className="nav-item">
            <a
              className={`nav-link ${
                activePill === "imagegallary" ? "active" : ""
              }`}
              href="#"
              onClick={(e) => {
                e.preventDefault(); // Prevent page reload
                onPillClick("imagegallary");
              }}
            >
              <i className="bx bx-link bx-sm me-1_5"></i> Image Gallary
            </a>
          </li>
          <li className="nav-item">
            <a
              className={`nav-link ${
                activePill === "activities" ? "active" : ""
              }`}
              href="#"
              onClick={(e) => {
                e.preventDefault(); // Prevent page reload
                onPillClick("activities");
              }}
            >
              <i className="bx bx-link bx-sm me-1_5"></i> Activities
            </a>
          </li>
        </ul>
      </div>
    </div>
  );
};

export default ProjectNav;