import { useSelector } from "react-redux";
import "./header.style.scss";
import { configConstants } from "../../_constants";

export default function Header({ icon, title, subtitles = [] }) {
  const authentication = useSelector((state) => state.authentication);
  
  return (
    <div className="header-container">
      <div className="header-left-side">
        {icon}
        <p className="header-title">
          {title}
          {!!subtitles?.length &&
            subtitles?.map((item, index) => (
              <span key={index} style={{ fontWeight: 400 }}>
                <span className="header-title">{" - "}</span>
                {item}
              </span>
            ))}
        </p>
      </div>
      <div className="header-right-side">
        <p className="header-name">{authentication?.user?.fullname}</p>
        <img
          src={!!authentication?.user?.avatar ? (configConstants.BASE_URL + authentication?.user?.avatar) : '/assets/imgs/avatar_auth.png'}
          className="header-avatar"
        />
      </div>
    </div>
  );
}