"use client";

import { useSession, signOut } from "next-auth/react";
import { useState } from "react";
import { LuUser, LuLogOut } from "react-icons/lu";

export function UserNav() {
  const { data: session } = useSession();
  const [isOpen, setIsOpen] = useState(false);

  // Si no hay sesión, no renderizar nada
  if (!session?.user) return null;

  return (
    <div className="relative">
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="flex items-center gap-2 text-sm font-medium text-gray-600 hover:text-gray-900"
      >
        <div className="h-8 w-8 rounded-full bg-gray-200 flex items-center justify-center">
          <LuUser className="h-5 w-5 text-gray-500" />
        </div>
        <span>{session.user.name}</span>
      </button>

      {isOpen && (
        <div
          className="absolute right-0 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
          // Usar onMouseLeave es a menudo mejor para menús desplegables
          onMouseLeave={() => setIsOpen(false)}
        >
          {/* Botón de Cerrar Sesión */}
          <button
            onClick={() => signOut({ callbackUrl: "/" })}
            className="cursor-pointer flex items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
          >
            <LuLogOut className="mr-2 h-4 w-4" />
            <span>Cerrar sesión</span>
          </button>
        </div>
      )}
    </div>
  );
}