import React from 'react';

const RoleBadge = ({ JobRoles, currentJobRole, onRoleChange }) => {
  const handleRoleSelect = (newRoleId) => {
    onRoleChange(newRoleId);
  };

 
  const validJobRoles = Array.isArray(JobRoles) ? JobRoles : [];

  const selectedRole = validJobRoles.find((role) => role.id === currentJobRole);
  const selectedRoleName = selectedRole ? selectedRole.name : 'Select Job Role';

  if (validJobRoles.length === 0) {
    return (
      <div className="badge bg-label-warning d-flex align-items-center lead">
        <span className="ms-1 px-2 py-1">No Roles Available</span>
      </div>
    );
  }

  return (
    <div className="dropdown py-2 px-3 cursor-pointer">
      <div
        className=" dropdown-toggle d-flex align-items-center lead"
        id="dropdownMenuButton"
        data-bs-toggle="dropdown"
        aria-expanded="false"
      >
        <span className="ms-1 px-2 py-1">
          <small>{selectedRoleName}</small>
        </span>
      </div>
      <ul
        className="dropdown-menu"
        aria-labelledby="dropdownMenuButton"
        style={{ maxHeight: '200px', overflowY: 'auto' }}
      >
        {validJobRoles.map((role) => (
          <li key={role.id}>
            <a
              className="dropdown-item"
              onClick={(e) => {
                e.preventDefault();
                handleRoleSelect(role.id);
              }}
            >
              {role.name}
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default RoleBadge;
