Build with AI

import React, {
  useState, useEffect, useMemo, useCallback
} from 'react';
import {
  Button
} from '@/components/ui/button';



export default function UserProfile({
  userId, onUpdate
}: UserProfileProps) {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);
  const [editing, setEditing] = useState(false);

  const fetchUser = useCallback(async () => {
    try {
      setLoading(true);
      const response = await fetch(`/api/users/${userId}`);
      const userData = await response.json();
      setUser(userData);
    } catch (error) {
      console.error('Failed to fetch user:', error);
    } finally {
      setLoading(false);
    }
  }, [userId]);

  useEffect(() => {
    fetchUser();
  }, [fetchUser]);


  const displayName = useMemo(() => {
    return user ? `${user.firstName} ${user.lastName}` : '';
  }, [user]);

  if (loading) {
    return <div className="flex items-center justify-center p-8">
      <div className="animate-spin rounded-full h-8 w-8 border-b-2"></div>
    </div>;
  }

  return (
    <div className="max-w-2xl mx-auto p-6">
      <div className="bg-white rounded-lg shadow-md p-6">
        <div className="flex items-center justify-between mb-6">
          <h1 className="text-2xl font-bold">{displayName}</h1>
          <Button
            onClick={() => setEditing(!editing)}
            variant={editing ? "secondary" : "default"}
          >
            {editing ? 'Cancel' : 'Edit'}
          </Button>
        </div>
        
        {editing ? (
          <EditForm user={user} onSave={handleSave} />
        ) : (
          <UserDetails user={user} />
        )}
      </div>
    </div>
  );
}