import React, { useState } from 'react';

export function UserNav() {
  const [open, setOpen] = useState(false);

  return (
    <div className="relative">
      <button 
        onClick={() => setOpen(!open)}
        className="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center"
      >
        U
      </button>

      {open && (
        <div className="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10">
          <div className="p-2 border-b">
            <p className="font-medium">shadcn</p>
            <p className="text-sm text-gray-500">m@example.com</p>
          </div>
          {['Profile', 'Billing', 'Settings', 'New Team', 'Log out'].map((item) => (
            <button
              key={item}
              className="w-full text-left px-3 py-2 hover:bg-gray-100"
            >
              {item}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}