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="nav-align-top">
      <ul className="nav nav-tabs ">
        <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> <span className="d-none d-md-inline">Profile</span>
          </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><span className="d-none d-md-inline" > Teams</span>
          </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> <span className="d-none d-md-inline">Infrastructure</span>
          </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> <span className="d-none d-md-inline">Image Gallary</span>
          </a>
        </li>
        <li className="nav-item">
          <a
            className={`nav-link ${activePill === "directory" ? "active" : ""}`}
            href="#"
            onClick={(e) => {
              e.preventDefault(); // Prevent page reload
              onPillClick("directory");
            }}
          >
            <i className="bx bx-link bx-sm me-1_5"></i> <span className="d-none d-md-inline">Directory</span>
          </a>
        </li>
      </ul>
    </div>
  );
};

export default ProjectNav;