Try LogicStamp

import React, { useState, useEffect } from 'react';
import { Button } from './Button';
import { useAuth } from '../hooks/useAuth';

interface UserProfileProps {
  userId: string;
  onUpdate?: (data: UserData) => void;
}

export const UserProfile: React.FC<UserProfileProps> = ({ userId, onUpdate }) => {
  const [user, setUser] = useState<UserData | null>(null);
  const { isAuthenticated } = useAuth();
  
  useEffect(() => {
    if (isAuthenticated) {
      fetchUser(userId).then(setUser);
    }
  }, [userId, isAuthenticated]);
  
  return (
    <div className="flex flex-col gap-4 p-6 bg-theme-primary rounded-lg shadow-md">
      {user && (
        <div className="flex items-center gap-3">
          <div className="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center">
            <span className="text-white font-bold text-lg">{user.name.charAt(0)}</span>
          </div>
          <div className="flex-1">
            <h2 className="text-xl font-bold text-gray-900 dark:text-white">{user.name}</h2>
            <p className="text-sm text-gray-600 dark:text-gray-400">{user.email}</p>
          </div>
          <Button 
            onClick={() => onUpdate?.(user)}
            className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-colors"
          >
            Update Profile
          </Button>
        </div>
      )}
    </div>
  );
};