import React from "react";

const ServiceProjectNav = ({ onPillClick, activePill }) => {
  const ProjectTab = [
    { key: "profile", icon: "bx bx-user", label: "Profile" },
    {
      key: "jobs",
      icon: "bx bx-briefcase-alt",
      label: "Jobs",
      link: "/service/job",
    },
    { key: "teams", icon: "bx bx-group", label: "Teams" },

    {
      key: "directory",
      icon: "bx bxs-contact",
      label: "Directory",
    },
  ];
  return (
    <div className="table-responsive">
      <div className="nav-align-top">
        <ul className="nav nav-tabs">
          {ProjectTab?.filter((tab) => !tab.hidden)?.map((tab) => (
            <li key={tab.key} className="nav-item cursor-pointer">
              <a
                className={`nav-link ${
                  activePill === tab.key ? "active cursor-pointer" : ""
                } fs-6`}
                onClick={(e) => {
                  e.preventDefault();
                  onPillClick(tab.key);
                }}
              >
                <i className={`${tab.icon} bx-sm me-1_5`}></i>
                <span className="d-none d-md-inline  ">{tab.label}</span>
              </a>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default ServiceProjectNav;