"use client";

import { useSession, signOut } from "next-auth/react";
import { User, LogOut } from "lucide-react";
import SyncStatus from "@/components/offline/SyncStatus";

export default function DesktopHeader() {
  const { data: session } = useSession();

  return (
    <header className="hidden md:flex fixed top-0 left-64 right-0 h-14 bg-white border-b border-gray-200 z-30 items-center justify-end px-6 gap-4">
      {session?.user && (
        <>
          <SyncStatus compact />
          <div className="flex items-center gap-3">
            <div className="text-right">
              <p className="text-sm font-medium text-gray-900">{session.user.name}</p>
              <p className="text-xs text-gray-500 capitalize">{session.user.role}</p>
            </div>
            <div className="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
              <User className="w-5 h-5 text-blue-600" />
            </div>
            <button
              onClick={() => signOut({ callbackUrl: "/login" })}
              className="p-2 rounded-lg hover:bg-gray-100 text-gray-600 hover:text-red-600 transition-colors"
              title="Cerrar Sesión"
            >
              <LogOut className="w-5 h-5" />
            </button>
          </div>
        </>
      )}
    </header>
  );
}