pelagia-portal/App/components/layout/header.tsx

"use client";

import { signOut } from "next-auth/react";
import { LogOut } from "lucide-react";
import type { Role } from "@prisma/client";
import { CartIcon } from "./cart-icon";
import { NotificationBell } from "./notification-bell";
import { ReportIssueButton } from "./report-issue-button";

const ROLE_LABELS: Record<Role, string> = {
  TECHNICAL: "Technical",
  MANNING: "Manning",
  ACCOUNTS: "Accounts",
  MANAGER: "Manager",
  SUPERUSER: "SuperUser",
  AUDITOR: "Auditor",
  ADMIN: "Admin",
};

const CART_ROLES: Role[] = ["TECHNICAL", "MANNING", "SUPERUSER", "MANAGER"];

interface NotificationItem {
  id: string;
  body: string;
  link: string | null;
  isRead: boolean;
  sentAt: string;
  poId: string | null;
}

interface HeaderProps {
  user: { name: string; email: string; role: Role };
  initialUnreadCount: number;
  initialNotifications: NotificationItem[];
}

export function Header({ user, initialUnreadCount, initialNotifications }: HeaderProps) {
  return (
    <header className="flex h-16 items-center justify-between border-b border-neutral-200 bg-white px-6">
      <div />
      <div className="flex items-center gap-2">
        {CART_ROLES.includes(user.role) && <CartIcon />}
        <ReportIssueButton />
        <NotificationBell
          initialUnreadCount={initialUnreadCount}
          initialNotifications={initialNotifications}
        />
        <div className="text-right ml-2">
          <p className="text-sm font-medium text-neutral-900">{user.name}</p>
          <p className="text-xs text-neutral-500">{ROLE_LABELS[user.role]}</p>
        </div>
        <button
          onClick={() => signOut({ callbackUrl: "/login" })}
          className="flex items-center gap-1.5 rounded-lg p-2 text-neutral-500 hover:bg-neutral-100 hover:text-neutral-700 transition-colors"
          title="Sign out"
        >
          <LogOut className="h-4 w-4" />
        </button>
      </div>
    </header>
  );
}