/**
 * AvatarButton — Circular header button showing the signed-in user's avatar.
 *
 * Priority: profile image → initials (firstName + lastName) → person icon.
 * Shows a green indicator dot when signed in.
 * Matches the size-10 rounded-full header button pattern used throughout the app.
 *
 * Props:
 *   onClick (func) — called when the button is tapped
 */
var AvatarButton = function (props) {
    var onClick = props.onClick;
    var auth    = useClerkAuth();
    var user    = auth.user;

    var initials = null;
    if (user) {
        var parts = [user.firstName, user.lastName].filter(Boolean);
        if (parts.length > 0) {
            initials = parts.map(function (n) { return n[0].toUpperCase(); }).join('');
        }
    }

    return (
        <button
            onClick={onClick}
            aria-label="Account menu"
            className="relative flex items-center justify-center size-10 rounded-full bg-surface shadow-soft overflow-hidden ring-2 ring-primary/30 hover:ring-primary transition-all btn-nature"
        >
            {user && user.imageUrl ? (
                <img
                    src={user.imageUrl}
                    alt={user.firstName || 'User avatar'}
                    className="w-full h-full object-cover"
                    referrerPolicy="no-referrer"
                />
            ) : initials ? (
                <span className="text-xs font-black text-forest">{initials}</span>
            ) : (
                <span className="material-symbols-outlined text-forest text-lg">person</span>
            )}
            {/* Signed-in indicator dot */}
            <span className="absolute bottom-0.5 right-0.5 w-2.5 h-2.5 bg-primary rounded-full border-2 border-surface"></span>
        </button>
    );
};

window.AvatarButton = AvatarButton;