import React from "react";

const Avatar = ({ firstName, lastName }) => {
  function generateAvatarText(firstName, lastName) {
    if (!firstName) return "";
    if (!lastName || lastName.trim() === "") {
      return firstName.slice(0, 2).toUpperCase();
    }
    return `${firstName[0]}${lastName[0]}`.toUpperCase();
  }

  function getRandomBootstrapBgClass() {
    const bgClasses = [
      "bg-primary",
      "bg-secondary",
      "bg-success",
      "bg-danger",
      "bg-warning",
      "bg-info",
      "bg-dark",
      "text-light",
    ];

    const randomIndex = Math.floor(Math.random() * bgClasses.length);
    return bgClasses[randomIndex];
  }
  return (
    <>
      <div className="avatar-wrapper p-1">
        <div className="avatar me-2">
          <span
            className={`avatar-initial rounded-circle ${getRandomBootstrapBgClass()}`}
          >
            {generateAvatarText(firstName, lastName)}
          </span>
        </div>
      </div>
    </>
  );
};

export default Avatar;
