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";
import { jwtVerify } from "jose";
import { redirect } from "next/navigation";

const secret = new TextEncoder().encode(process.env.JWT_SECRET);

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

  let role: number = 5;

  if (token) {
    try {
      const { payload } = await jwtVerify(token, secret);
      role = payload.role as number;
    } catch (error) {
      role = 5;
    }
  }

  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>
  );
}