import React from "react";
const EmployeeNav = ({ onPillClick, activePill }) => {
  const tabs = [
    { key: "profile", icon: "bx bx-user", label: "Profile" },
    { key: "attendance", icon: "bx bx-group", label: "Attendances" },
    { key: "documents", icon: "bx bx-user", label: "Documents" },
    { key: "activities", icon: "bx bx-grid-alt", label: "Activities" },
  ];

  return (
    <div className="col-md-12">
      <div className="nav-align-top">
        <ul className="nav nav-tabs overflow-auto" id="horizontal-example">
          {tabs.map(({ key, icon, label }) => (
            <li
              key={key}
              className="nav-item"
              style={{ padding: "10px 10px 0 10px" }}
            >
              <a
                href="#"
                className={`nav-link py-1 px-2 small ${
                  activePill === key ? "active" : ""
                }`}
                onClick={(e) => {
                  e.preventDefault();
                  onPillClick(key);
                }}
              >
                <i className={`icon-base ${icon} icon-sm me-1_5`}></i> {label}
              </a>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default EmployeeNav;
