front-AT/app/Components/layout/Header/Header.tsx

import Image from "next/image";
import Link from "next/link";
import BarNavigation from "../BarNavigation/BarNavigation";
import header from "./Header.module.css";
import BarNavigationServicio from "../BarNavigation/BarNavigationServicio";
import { cookies } from "next/headers";

export default async function Header() {
  const cookieStore = await cookies();
  const role = cookieStore.get("role")?.value || "";

  return (
    <header className={header.header}>
      <Link
        href="https://www.unam.mx/"
        target="_blank"
        className={header.center}
        style={{ display: "flex", alignItems: "center", margin: "10px 5px" }}
      >
        <div className={header.logoContainer}>
          <Image
            className={header.logo}
            src="/logo_fes.png"
            alt="Logo FES"
            fill
            style={{ objectFit: "contain" }}
          />
        </div>
      </Link>
      <div className={header.yellowPart}></div>
      <div className={header.containerBarNav}>
        {role === "1" && <BarNavigation />}
        {role === "4" && <BarNavigation />}

        {role === "2" && <BarNavigationServicio/>}
        {role === "3" && <BarNavigationServicio/>}
      </div>
    </header>
  );
}