"use client";

import { useSession } from "next-auth/react";
import { Bell, PawPrint } from "lucide-react";

export default function AdminHeader() {
  const { data: session } = useSession();
  const initials = session?.user?.name
    ? session.user.name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2)
    : "A";

  return (
    <header className="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-6 sticky top-0 z-30 shrink-0">
      <div className="flex items-center gap-3">
        <div className="flex items-center gap-2 text-primary-600">
          <PawPrint className="h-5 w-5" />
          <span className="font-bold text-sm text-gray-900 tracking-wide">americas.pet</span>
        </div>
        <span className="text-gray-300 text-lg font-light">|</span>
        <span className="text-sm font-semibold text-gray-500 uppercase tracking-widest">Admin</span>
      </div>

      <div className="flex items-center gap-2">
        <button className="p-2 hover:bg-gray-100 rounded-xl transition-colors" title="Notifications">
          <Bell className="h-4 w-4 text-gray-500" />
        </button>
        <div className="flex items-center gap-2.5 pl-3 border-l border-gray-200">
          <div className="w-8 h-8 rounded-full bg-gradient-to-br from-primary-400 to-primary-600 flex items-center justify-center text-white text-xs font-bold shadow-sm">
            {initials}
          </div>
          <div className="hidden sm:block">
            <p className="text-sm font-semibold text-gray-800 leading-tight">{session?.user?.name ?? "Admin"}</p>
            <p className="text-xs text-gray-400 leading-tight">{session?.user?.email ?? ""}</p>
          </div>
        </div>
      </div>
    </header>
  );
}