// Example: Avatar customization with live preview
function AvatarCustomizer() {
  const [selectedComponents, setSelectedComponents] = useState([]);

  const handleComponentSelect = (groupId, compId) => {
    // Update local state for preview
    setSelectedComponents(prev => {
      const filtered = prev.filter(c => c.groupId !== groupId);
      return [...filtered, { groupId, compId }];
    });
  };

  const saveAvatarChanges = async () => {
    try {
      const result = await graphqlClient.mutate({
        mutation: gql`
          mutation UpdateAvatar($components: [AvatarSetInput]!) {
            updateAvatarSet(components: $components) {
              groupId
              compId
            }
          }
        `,
        variables: {
          components: selectedComponents
        }
      });

      console.log("Avatar updated:", result.data.updateAvatarSet);
      showSuccessMessage("Avatar saved successfully!");
      closeModal();
    } catch (error) {
      console.error("Failed to update avatar:", error);
      showErrorMessage("Failed to save avatar changes");
    }
  };

  return (
    <div className="avatar-customizer">
      <AvatarPreview components={selectedComponents} />
      <ComponentSelector onSelect={handleComponentSelect} />
      <button onClick={saveAvatarChanges}>Save Avatar</button>
    </div>
  );
}