import React from "react";
import { AppDockIcon } from "../../icons/HeaderIcons";
import orgImg from "../../../assets/orgTemp.png"

const Header: React.FC = () => {
  const guestUsers = [
    { value: "Nazria", color: "#43C06D" },
    { value: "Name1", color: "#0050EB" },
    { value: "Abigail", color: "#FF6600" },
    { value: "Jack", color: "#488EF6" },
  ]; // Example guest users array

  return (
    <div className="header-container">
      <div className="options-container">
        <div className="share-button">Share</div>
        <div className="app-docker-button">
          <AppDockIcon />
        </div>
      </div>
      <div className="split"></div>
      <div className="users-container">
        <div className="guest-users-container">
          {guestUsers.length > 3 && (
            <div className="other-guest">+{guestUsers.length - 3}</div>
          )}
          {guestUsers.slice(0, 3).map((user, index) => (
            <div
              key={index}
              className="user-profile"
              style={{ background: user.color }}
            >
              {user.value[0]}
            </div>
          ))}
        </div>
        <div className="user-profile-container">
          <div className="user-profile" style={{ background: "#48AC2A" }}>
            V
          </div>
          <div className="user-organization">
            <img src={orgImg} alt="" />
          </div>
        </div>
      </div>
    </div>
  );
};

export default Header;