import React from "react";

const EmployeeNav = ({ onPillClick, activePill }) => {
  return (
    <div className="col-md-12">
      <div className="nav-align-top ">
        <ul className="nav nav-tabs">
          <li className="nav-item" style={{ padding: "10px 10px 0 10px" }}>
            <a
              className={`nav-link py-1 px-2 small ${
                activePill === "profile" ? "active" : ""
              }`}
              href="#"
              onClick={(e) => {
                e.preventDefault(); // Prevent page reload
                onPillClick("profile");
              }}
            >
              <i className="icon-base bx bx-user icon-sm me-1_5"></i> Profile
            </a>
          </li>
          <li className="nav-item" style={{ padding: "10px 10px 0 10px" }}>
            <a
              className={`nav-link py-1 px-2 small ${
                activePill === "attendance" ? "active" : ""
              }`}
              href="#"
              onClick={(e) => {
                e.preventDefault(); // Prevent page reload
                onPillClick("attendance");
              }}
            >
              <i className="bx bx-group bx-sm me-1_5"></i> Attendances
            </a>
          </li>
          <li className="nav-item" style={{ padding: "10px 10px 0 10px" }}>
            <a
              className={`nav-link py-1 px-2 small  ${
                activePill === "account" ? "active" : ""
              }`}
              href="#"
              onClick={(e) => {
                e.preventDefault(); // Prevent page reload
                onPillClick("account");
              }}
            >
              <i className="bx bx-user bx-sm me-1_5"></i> Documents
            </a>
          </li>

          <li className="nav-item" style={{ padding: "10px 10px 0 10px" }}>
            <a
              className={`nav-link py-1 px-2 small ${
                activePill === "activities" ? "active" : ""
              }`}
              href="#"
              onClick={(e) => {
                e.preventDefault(); // Prevent page reload
                onPillClick("activities");
              }}
            >
              <i className="bx bx-grid-alt bx-sm me-1_5"></i> Activities
            </a>
          </li>
        </ul>
      </div>
    </div>
  );
};

export default EmployeeNav;