"use client";

import { signOut } from "next-auth/react";
import { Anchor, LogOut } from "lucide-react";
import { NotificationBell } from "./notification-bell";
import type { Role } from "@prisma/client";

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

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

export function MobileHeader({ user, initialUnreadCount, initialNotifications }: MobileHeaderProps) {
  return (
    <header className="flex h-14 items-center justify-between border-b border-neutral-200 bg-white px-4 md:hidden">
      <div className="flex items-center gap-2">
        <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-primary-600">
          <Anchor className="h-3.5 w-3.5 text-white" />
        </div>
        <span className="text-sm font-semibold text-neutral-900">PPMS</span>
      </div>
      <div className="flex items-center gap-1">
        <NotificationBell
          initialUnreadCount={initialUnreadCount}
          initialNotifications={initialNotifications}
        />
        <button
          onClick={() => signOut({ callbackUrl: "/login" })}
          className="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>
  );
}